window.onload
window.onload事件主要用来解决JavaScript脚本在运行时获取不到对象的问题,这种情况发生的原因是:代码是从上至下执行的,当执行到JavaScript脚本时,HTML的文档还没有执行,因为我们习惯将JavaScript脚本放在HTML文本的上面。
比如:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>2333</title>
<style type="text/css">
#lz{
width:300px;
height:200px;
}
</style>
<script type="text/javascript">
document.getElementById("lz").style.backgroundColor="#FFCCCC";
</script>
</head>
<body>
<div id="lz"></div>
</body>
</html>
document.getElementById(“lz”).style.backgroundColor=”#FFCCCC”;
这条语句操作是:获取名为“lz”的元素,并将它的背景颜色改为骚粉。但是这条语句在实际情况中不能生效,因为代码是从上至下执行的,当执行到JavaScript脚本时,名为“lz”的div对象还没有出生,自然也无法获取这个对象,更别说对它进行某项操作了。
改进的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>2333</title>
<style type="text/css">
#lz{
width:300px;
height:200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("lz").style.backgroundColor="#FFCCCC";
}
</script>
</head>
<body>
<div id="lz"></div>
</body>
</html>
我们将“document.getElementById(“bg”).style.backgroundColor=”#FFCCCC”;”这条语句放置在window.onload时间下,当HTML文档加载完毕时,这条语句就会被执行,这时“bg”已经生成,语句自然能获得这个对象,也能对它进行操作
请注意,window.onload时间只能绑定一个函数,不能绑定多个。
例如:
window.onload=function xiaobai(){}
window.onload=function xiaohei(){}
如果这样写,最后一个绑定的函数会覆盖前面的函数,“xiaohei”会覆盖“xiaobai”。
但是我们稍微变通一下,就可以实现对多个对象进行多个操作,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>2333</title>
<style type="text/css">
#lz{
width:300px;
height:200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
function xiaobai(){
document.getElementById("lz").style.backgroundColor="#FFCCCC";
}
function xiaohei(){
document.getElementById("lz").style.backgroundColor="#68acd3";
}
xiaobai();
xiaohei();
}
</script>
</head>
<body>
<div id="lz"></div>
</body>
</html>
就像这样,我们可以使用嵌套函数来完成我们的目标。