关于使用runtimeStyle属性问题讨论文章


Posted in Javascript onMarch 08, 2007

当我们在IE中使用IE提供的DOM时,我们会发现关于style的相关属性有三个分组,它们分别是style、runtimeStyle和currentStyle。关于这个三种style的作用和基本用途,我曾经在这篇文章中有讲过,但随着越来越深入的使用,总算对怎么使用runtimeStyle属性有了一些自己的心得。

    首先,runtimeStyle属性不是必需的,它的存在甚至远没有currentStyle有意义,因为由于IE布局、呈现原理限制,style属性里的定义,总有一些是无法和currentStyle同步的。什么意思呢?比如我们不设定TR元素的line-height或table-layout样式属性,我们是无法得到任意高度的表格行的,即使你费劲写上100个style="height: 1px",也是没有任何效果的。这时style的height虽然是1px,而currentStyle的height仍然是表格实际的高度。firefox不提供runtimeStyle和currentStyle,不知道它怎么解决这个不同步的问题?是不是会反向同步不能表现的style属性呢?

    所以,runtimeStyle属性说白了就是用来锦上添花的,那么有没有只有使用runtimeStyle才能完成的功能或效果呢?要说有那也是自找的,比如本blog的Invert页面颜色功能,这个还真的是只有使用runtimeStyle属性才能做出来。除此之外,由于对runtimeStyle属性的设置不用同步到style,也不会同步,所以使用runtimeStyle修改元素的样式应该有更高的效率。不过这个不同步同时带来一个比较隐蔽的问题,如果我们总是操作dom,使用runtimeStyle和currentStyle是没有问题的,可是如果我们在实现中又穿插使用DHTML特性,比如读写innerHTML或读取outerHTML属性。这时不同步style的问题就出来了,不小心遇上回郁闷个半死的,因为程序不会有任何的运行错误,就是不管怎么弄都没有预期的效果。

    总结一:runtimeStyle属性一定要配对使用,即element.runtimeStyle.xxx = 'attribue';和element.runtimeStyle.xxx = '';配对。如果可以明确的写出element.style.xxx = 'attribue1';和element.style.xxx = 'attribue2';,那么就没有什么必要使用runtimeStyle了。在同一个元素中混用style和runtimeStyle应该是一定要禁止的,由于style和runtimeStyle覆盖优先级不同,如果混用稍有不慎就会出一些莫名奇妙的问题,徒增debug的困扰和难度。

    总结二:runtimeStyle属性不要在有innerHTML和outerHTML操作的编程环境中使用,否则不小心就会郁闷个半死。因为runtimeStyle的修改不会同步会html中的style里去,这个问题就会类似上面提到的同一元素中混用style和runtimeStyle的问题。

    当然混用在首次实现的时候使用,程序员心里面其实是很清楚地,一般不会出什么大差错,可是这样的代码会给后期的debug以及update埋下很严重的错误隐患。

Javascript 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
JSON 编辑器实现代码
Dec 06 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
JS实现打字游戏
Dec 17 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 #Javascript
在IE模态窗口中自由查看HTML源码的方法
Mar 08 #Javascript
encode脚本和normal脚本混用的问题与解决方法
Mar 08 #Javascript
IE7提供XMLHttpRequest对象为兼容
Mar 08 #Javascript
使用onbeforeunload属性后的副作用
Mar 08 #Javascript
HTML中不支持静态Expando的元素的问题
Mar 08 #Javascript
使用TextRange获取输入框中光标的位置的代码
Mar 08 #Javascript
You might like
thinkphp实现数组分页示例
2014/04/13 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
一些mootools的学习资源
2010/02/07 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
JS实现元素上下左右移动效果
2017/10/18 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
Linux如何压缩可执行文件
2013/10/21 面试题
会计实习生自我鉴定
2013/12/12 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电