关于使用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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
JavaScript中的类继承
Nov 25 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
原生js实现碰撞检测
Mar 12 Javascript
js 函数性能比较方法
Aug 24 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
php5 图片验证码实现代码
2009/12/11 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP实现微信退款功能
2018/10/02 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python如何实现递归转非递归
2021/02/25 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
2014年导购员工作总结
2014/11/18 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
Python打包exe时各种异常处理方案总结
2021/05/18 Python