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> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 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 构建精确任务处理应用