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 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 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中几种常见的超时处理全面总结
2012/09/11 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
将php数组输出html表格的方法
2014/02/24 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
为原生js Array增加each方法
2012/04/07 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
Python变量作用范围实例分析
2015/07/07 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
Python谱减法语音降噪实例
2019/12/18 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
Python中qutip用法示例详解
2020/10/02 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
成教自我鉴定
2013/10/27 职场文书
顶岗实习接收函
2014/01/09 职场文书
高中生评语大全
2014/04/25 职场文书
政治表现评语
2014/05/04 职场文书
物业管理专业求职信
2014/06/11 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
小学教师工作总结2015
2015/04/07 职场文书