网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:
1) 将脚本代码放在网页的底端
这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。
感觉比较凌乱（其实经常使用）
2) 通过window.onload来执行脚本代码。
如我们需要将脚本代码放在一个更为合适的地方，那么window.onload方式就是一个良好的选择。window.onload是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F90";
</script>
<body>
<div id="bg"></div>
</body>
<script type="text/javascript">
window.onload=function(){
document.getElementById("bg").style.backgroundColor="#F90";
}
</script>
<script type="text/javascript">
if(window.addEventListener){
window.addEventListener("load",bg,false);
window.addEventListener("load",changeW,false);
}
else{ //兼容ie9以前的版本
window.attachEvent("onload",bg);
window.attachEvent("onload",changeW);
}
function bg(){
document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
document.getElementById("bg").style.width="600px";
}
</script>
原创文章 271
获赞 116
访问量 4万+