关于使用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 相关文章推荐
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
js实现3d悬浮效果
Feb 16 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 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
php 一元分词算法
2009/11/30 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python读写ini文件的方法
2015/05/28 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Python json转字典字符方法实例解析
2020/04/13 Python
python Zmail模块简介与使用示例
2020/12/19 Python
施工资料员的岗位职责
2013/12/22 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
消防安全培训工作总结
2015/10/23 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python