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 相关文章推荐
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
javascript实现弹出层效果
Dec 10 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
自制PHP框架之设计模式
2017/05/07 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python基于socket实现网络广播的方法
2015/04/29 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
提升Python程序性能的7个习惯
2019/04/14 Python
用python绘制樱花树
2020/10/09 Python
用Python制作音乐海报
2021/01/26 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
教育科学研究生自荐信
2013/10/09 职场文书
买卖协议书范本
2014/04/21 职场文书
责任担保书范文
2014/05/21 职场文书
卖房协议书样本
2014/10/30 职场文书
2014年纠风工作总结
2014/12/08 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
繁星春水读书笔记
2015/06/30 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记