window.onload的使用方法

2025-09-07


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

案例一

                                    <script 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')",会找不到这个函数(由于这个时候函数还没有加载)。要调用这个函数,就要让它加载完毕。

案例二

  111  <script> 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)");}<script>        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

本文地址:https://www.lifejia.cn/news/205180.html

免责声明:本站内容仅用于学习参考,信息和图片素材来源于互联网,如内容侵权与违规,请联系我们进行删除,我们将在三个工作日内处理。联系邮箱:cloudinto#qq.com(把#换成@)