window.onload的用法

window.onload: 页面加载完成
一,window.onload的用法:
因为页面中的代码一般情况下按照,从上到下,从左到右的顺序执行。
所以当js代码需要获取页面中的元素时,如果script标签在元素的前面,需要加window.onload;如果script放在了元素后面,就不需要加 window.onload。
例一:点击按钮,实现div变大的效果(宽,高,增加200像素)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">          
        document.getElementById("btn").onclick=function(){
            document.getElementById("box").style.width="400px";
            document.getElementById("box").style.height="400px";
        }
    </script>
</head>
<body>
    <input type="button" name="btn" id="btn" value="确认">
    <div id="box"></div>
</body>

注:例一在点击确认按钮时,页面上div并没有任何变化,原因是,由于程序是从上往下开始执行,运行到document.getElementById(“btn”)时,并没有发现“btn”这个元素,所以就会提示错误信息(null),此时的程序运行时也就没有任何JavaScript效果。

二,问题解决
把JavaScript中要执行的程序放在window.οnlοad=function(){}中,如例二:
例二:正确的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            document.getElementById("btn").onclick=function(){
            document.getElementById("box").style.width="400px";
            document.getElementById("box").style.height="400px";
        }
        }
    </script>
</head>
<body>
    <input type="button" name="btn" id="btn" value="确认">
    <div id="box"></div>
</body>

  

posted @   小辣椒樱桃  阅读(3009)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示