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


Posted in Javascript onJuly 09, 2015

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

<!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语句无法获得对象的情况了。

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

Javascript 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
JS 自动安装exe程序
Nov 30 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 #Javascript
jquery.map()方法的使用详解
Jul 09 #Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 #Javascript
javascript+ajax实现产品页面加载信息
Jul 09 #Javascript
浅谈JavaScript中null和undefined
Jul 09 #Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 #Javascript
JavaScript包装对象使用详解
Jul 09 #Javascript
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
php中计算时间差的几种方法
2009/12/31 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
php pdo操作数据库示例
2017/03/10 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
微信小程序实现图片放大预览功能
2020/10/22 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
Linux下编译安装MySQL-Python教程
2015/02/02 Python
python处理csv数据的方法
2015/03/11 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python检测IP地址变化并触发事件
2018/12/26 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
python中四舍五入的正确打开方式
2021/01/18 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
医学专业职业生涯规划范文
2014/02/05 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
德语专业求职信
2014/03/12 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis