window.onload的使用方法

根据案例来了解一下window.onload的使用

案例一

     <ｓｃｒｉｐｔ type="text/javascript">// window.onload=function(){// function btn(obj){// var box=document.getElementById(obj);// box.style.display="block";// }// } function btn(obj){ var box=document.getElementById(obj); box.style.display="block"; }    显示第一个盒子 显示第二个盒子 显示第三个盒子 显示第四个盒子 
1
 
2
 
3
 
4
 

这种情况下，如果把js放在window.onload里面会报错。

解析：放在onload中的js会等html加载完再执行函数，但是在加载html的时候，里面有onclick="btn('box1')"，会找不到这个函数（由于这个时候函数还没有加载）。要调用这个函数，就要让它加载完毕。

案例二

    <ｓｃｒｉｐｔ> window.onload=function() { var box =document.getElementById("box"); function fun(id,bg) { var ID =document.getElementById(id); ID.onmouseover=function() { box.style.backgroundImage=bg;}} fun("id1","url(image/01big.jpg)"); fun("id2","url(image/02big.jpg)"); fun("id3","url(image/03big.jpg)"); fun("id4","url(image/04big.jpg)"); fun("id5","url(image/05big.jpg)");}<ｓｃｒｉｐｔ> window.onload=function(){ var box =document.getElementById("box"); function fun(id,bg){ var ID =document.getElementById(id); ID.onmouseover=function(){ box.style.backgroundImage=bg; } } fun("id1","url(image/01big.jpg)"); fun("id2","url(image/02big.jpg)"); fun("id3","url(image/03big.jpg)"); fun("id4","url(image/04big.jpg)"); fun("id5","url(image/05big.jpg)"); }