window.onload的使用

最新推荐文章于 2023-11-25 12:35:37 发布

honghong.zhou

最新推荐文章于 2023-11-25 12:35:37 发布

阅读量4.9k

点赞数 1

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/chengQunBin/article/details/78199487

版权

javascript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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

案例一

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background: red;
                margin-left: 50px;
                margin-top: 30px;
                display: none;
            }
        </style>
        <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";
                }
        </script>
    </head>
    <body>
        <button onclick="btn('box1')" >显示第一个盒子</button>
        <button onclick="btn('box2')">显示第二个盒子</button>
        <button onclick="btn('box3')" >显示第三个盒子</button>
        <button onclick="btn('box4')">显示第四个盒子</button>
        <div id="box1">1</div>
        <div id="box2">2</div>
        <div id="box3">3</div>
        <div id="box4">4</div>
    </body>
</html>

这种情况下，如果把js放在window.onload里面会报错。
这里写图片描述
解析：放在onload中的js会等html加载完再执行函数，但是在加载html的时候，里面有onclick="btn('box1')"，会找不到这个函数（由于这个时候函数还没有加载）。要调用这个函数，就要让它加载完毕。

案例二

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>111</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        #box{
            width: 360px;
            padding-top: 360px;
            background:url(image/01big.jpg) no-repeat center top;
            margin: 100px auto;
            border: 1px solid blueviolet;
            overflow: hidden;
        }
        ul{
            border-top: 1px solid blueviolet;
        }
        li{
            float: left;
        }
    </style>
    <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>
</head>
<body>
    <div id="box">
        <ul>
            <li id="id1"><img src="image/01.jpg" alt=""/></li>
            <li id="id2"><img src="image/02.jpg" alt=""/></li>
            <li id="id3"><img src="image/03.jpg" alt=""/></li>
            <li id="id4"><img src="image/04.jpg" alt=""/></li>
            <li id="id5"><img src="image/05.jpg" alt=""/></li>
        </ul>
    </div>
</body>
</html>