window.onload的用法

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

<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(){}中，如例二：
例二：正确的代码

<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>

window.onload的用法相关推荐

Javascrapy的window onload()函数用法
window.onload()通常用于<body>元素,在页面完全加载后(包括图片,css文件等等)执行脚本代码. 详情:https://www.runoob.com/w3cnote/ja ...
js window.onload 加载多个函数和追加函数
平时做项目经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");ret ...
window.onload用法详解
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...
window.onload用法
在编写js的时候,习惯性的将script放在head中,就经常导致出现使用body中的id报错(xxx is not defined),后来发现window.onload可以解决这个问题. 这里是编写 ...
window.onload匿名函数中element.onclick正确用法
先看下面有问题的代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
汉游天下掼蛋源码window.onload用法技巧
汉游天下掼蛋源码里原文中有这么一段话,描述的有点抽象: JavaScript引擎在执行onmousedown时,由于没有多线程的同步执行,不可能同时去处理刚创建元素的focus 和select方 ...
实现map window.onload加载
之前一直是写C/S的,最近转做B/S了,记录一下自己在工作和学习中的JS小技巧,方便自己今后复习和查阅. JS中默认只带array,有时候会需要key-value的map类功能,虽然array也支持a ...
window.onload，body onload=function(), document.onreadystatechange, httpRequest.onreadystatechang
部分内容参考:http://www.aspbc.com/tech/showtech.asp?id=1256 在开发的过程中,经常使用window.onload和body onload两种,很少使用do ...
about window.onload
在前几天一次练习中因为我要在页面加载完成后调用一个函数,于是我在javascript中用了window. onload,这个方法以前从学习js就在使用,有时还用来调用多个函数.然而我在这次想偷懒,就这 ...

window.onload的用法

window.onload的用法相关推荐

最新文章

热门文章