JS实现文档加载完成后执行代码

更新时间：2015年07月09日 10:06:09 投稿：hebedich

本文给大家讲述的是使用javascript实现文档加载完成后再执行代码的方法和示例，非常简单实用，有需要的小伙伴可以参考下。

在执行某些操作的时候，需要当文档完全加载完成之后再去执行，否则可能出现意向不到的情况，先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>脚本之家</title>
<style type="text/css"> 
div{ 
 width:200px; 
 height:200px; 
} 
</style> 
<script type="text/javascript"> 
document.getElementById("mytest").style.backgroundColor="#639"; 
</script> 
</head> 
<body> 
<div id="mytest"></div> 
</body> 
</html>

以上代码的初衷是将div的背景颜色设置为#639，但是并未达到我们预期的效果，这是因为文档加载的时候代码是顺序执行的，当执行js的设置背景颜色代码的时候，还没有加载到指定的div，所以js语句根本没有获取到对象。代码修改如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>脚本之家</title>
<style type="text/css"> 
div{ 
 width:200px; 
 height:200px; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
 document.getElementById("mytest").style.backgroundColor="#639"; 
} 
</script> 
</head> 
<body> 
<div id="mytest"></div> 
</body> 
</html>

以上代码实现了预期的效果，这是因为将代码放到了一个函数中，而此函数用作了window.onload事件的事件处理函数。window.onload事件触发的条件是当前文档完全加载完成，当此事件被触发之后，就会执行它的事件处理函数，这样因为所有文档都已加载了，就不存在js语句无法获得对象的情况了。

以上所述就是本文的全部内容了，希望大家能够喜欢。

您可能感兴趣的文章:

js获取异步函数数据的实现
本文主要介绍了js获取异步函数数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
详解JavaScript堆栈与拷贝
本文主要介绍了JavaScript中的堆栈与拷贝，能更好的帮助你理解JS的内存机制，感兴趣的同学，一定要认真看下
2021-06-06
微信小程序实现自定义导航栏
这篇文章主要为大家详细介绍了微信小程序实现自定义导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
JS 参数传递的实际应用代码分析
在项目中，有一个Ajax加载的区域，是一个Div标签，id为msg_box，这个控制链接包含在一个左侧的导航中，当从其他页面链接到这个页面时，该JS代码就失效了。
2009-09-09
js 内存释放问题
这里之所以使用setTimeout()，因为可以彻底回收当前所有对象，防止变量之间的引用导致释放失败，可以当作一个保障措施，按照道理来说，这里不会执行了。
2010-04-04
js实现正则匹配中文标点符号的方法
这篇文章主要介绍了js实现正则匹配中文标点符号的方法,涉及JavaScript正则匹配与判定的简单使用技巧,需要的朋友可以参考下
2015-12-12
javascript显示上周、上个月日期的处理方法
这篇文章主要为大家分享了关于javascript实现上周、上个月的处理方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-02-02
基于 Bootstrap Datetimepicker 联动
这篇文章主要介绍了基于bootstrap datetimepicker 联动效果,需要的朋友可以参考下
2017-08-08
javascript String split方法误操作
在项目中需要分析将一个有规则的字符串分割成一个字符串数组。
2009-09-09
微信小程序实现手写板
这篇文章主要为大家详细介绍了微信小程序实现手写板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07