用法
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.onload=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>
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
