JavaScript学习（三）：window.onload事件

最新推荐文章于 2022-05-21 16:24:33 发布

Andrew_Lii

最新推荐文章于 2022-05-21 16:24:33 发布

阅读量518

点赞数 1

分类专栏： html javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/Andrew_Lii/article/details/78945266

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

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>