关于使用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 相关文章推荐
JavaScript中实现块作用域的方法
Apr 01 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
用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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php+mysql事务rollback&commit示例
2010/02/08 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
YII中assets的使用示例
2014/07/31 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
javascript如何实现create方法
2019/11/04 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
python查找指定具有相同内容文件的方法
2015/06/28 Python
python 内置函数filter
2017/06/01 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
python 等差数列末项计算方式
2020/05/03 Python
店面销售职位的职责
2014/03/09 职场文书
大学生活自我评价
2014/04/09 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
影子教师研修方案
2014/06/14 职场文书
收银员岗位职责范本
2015/04/07 职场文书
大学生村官入党自传
2015/06/26 职场文书
食品卫生管理制度
2015/08/06 职场文书
Python基础详解之描述符
2021/04/28 Python
Java基础——Map集合
2022/04/01 Java/Android