window.onload的使用

最新推荐文章于 2024-10-27 00:16:27 发布

honghong.zhou

最新推荐文章于 2024-10-27 00:16:27 发布

阅读量6.2k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/chengQunBin/article/details/78199487

javascript 专栏收录该内容

36 篇文章

订阅专栏

本文通过两个具体案例探讨了window.onload在网页加载过程中的作用及其使用场景。案例一展示了如何通过按钮点击事件显示隐藏的div元素，并解释了将相关JavaScript代码放置于window.onload内部可能导致的问题及原因。案例二则演示了如何在页面完全加载后为图片元素添加鼠标悬停事件以更改背景图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据案例来了解一下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>