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

2014-03-02  来源:本站原创  分类:javascript技巧  人气:5 

当我们在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埋下很严重的错误隐患。

相关文章
  • 关于使用runtimeStyle属性问题讨论文章 2014-03-02

    当我们在IE中使用IE提供的DOM时,我们会发现关于style的相关属性有三个分组,它们分别是style.runtimeStyle和currentStyle.关于这个三种style的作用和基本用途,我曾经在这篇文章中有讲过,但随着越来越深入的使用,总算对怎么使用runtimeStyle属性有了一些自己的心得. 首先,runtimeStyle属性不是必需的,它的存在甚至远没有currentStyle有意义,因为由于IE布局.呈现原理限制,style属性里的定义,总有一些是无法和currentSty

  • JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布 2015-03-12

    研究了一年多的js,也差不多写一个自己的js库了. 我写这个不算框架,只是一个小型的js工具库,所以我用的名字是Library. 主要集合了我写js时一些常用的方法,并参考了prototype.js,jquery,google,百度,有啊等框架. 工具库已经在近几个效果中使用: JavaScript 多级联动浮动菜单 (第二版) JavaScript 浮动定位提示效果 JavaScript Table行定位效果 JavaScript Table排序 这个工具库的主要特点是: [跨浏览器]能在以下

  • [整理]RabbitMQ publish方法中的immediate和mandatory属性 2015-03-10

    鉴于在 RabbitMQ 的使用过程中,很多同学搞不清楚 basic.publish 接口中 mandatory 和 immediate 的背后含义,特搜集整理网上相关文章,以便彻底理解该问题. ===== 我是三体分隔线 ===== 在 RabbitMQ 3.0.0 版本的 README 中如是说: ... feature removal 23896 remove support for AMQP's "immediate" publish mode ... 另外一篇 文章 中也对该

  • UML三大硬伤及其讨论:UML 谁的硬伤 2014-05-04

    本文从UML建模连贯性方面存在的问题,以管理软件开发为例,针对与UML模型衔接的上游.下游.模型内部关系三个方面,分析了采用UML建模造成的三大隔阂,希望与众多建模爱好者共同探讨. 在国内的公开报道中,几乎众口一致地充斥着对统一建模语言UML(Unified Modeling Language)的褒奖,即便有公开抱怨也只是怪自己无法理解三位UML创始人的深不可测,怪自己的水平不够,没有料到UML本身存在着种种问题.本文作者只在北京大学计算机系的同行那里发现了他们撰文对UML的有效性提出了质疑.与

  • javascript 对象属性property与元素属性attribute的浏览器支持 2014-08-17

    对象属性property与元素属性attribute的浏览器支持情况,大家可以参考下. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] QQ空间 新浪微博 腾讯微博 搜狐微博 人人网 开心网 百度搜藏 更多 Tags:property attribute 复制链接收藏本文打印本文关闭本文返回首页 上一篇:JavaScript继承方式实例 下一篇:JS 对象属性相关(检查属性.枚举属性等) 相关文章 2013-06-06JavaScript中的this关键字介绍与使用实例 2012-1

  • javascript 设计模式之单体模式 面向对象学习基础 2014-06-03

    单体是在脚本加载时创建的,能将一系列有关联的变量和方法组织为一个逻辑单元,逻辑单元里面的内容通过单一的变量进行访问,也是笔记基础与常用的面向对象的定义方法. 单体模式(singleton) 单体是在脚本加载时创建的,能将一系列有关联的变量和方法组织为一个逻辑单元,逻辑单元里面的内容通过单一的变量进行访问: 一个单体主要分为三部分 用于访问内部信息的入口变量(如:Sky) 属性(如:nickName/age/timeInfo) 方法(如:sayHello) 基本结构 var Sky = { /*

  • 让Firefox支持event对象实现代码 2015-01-24

    FireFox并没有 window.event ,所以在FireFox下编写事件处理函数是很麻烦的事.如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event 通常为了兼容IE与FireFox,一般的事件处理方法为: btn.onclick=handle_btn_click; function handle_btn_click(evt){ if(evt==null)evt=window.event;//IE //处理事件. } 对于简单的程序,这不算麻烦. 但对于一些复杂的

  • 中文博客赚钱之出售链接篇 2014-02-27

    这是一个关于中文博客赚钱的系列讨论文章,本文为该系列的第二篇,关于博客如何出售文字链接赚钱. 中文博客赚钱之付费评论篇 中文博客赚钱之出售链接篇 中文博客赚钱之广告联盟篇 中文博客赚钱之推荐赚钱篇 博客总是容易获得较高的pagerank值,一般的博客的PR都能很容易达到3-4,所以文字链接广告商对博客格外亲睐.对于blogger来说,文字链接也是比较容易的一种赚钱方式,只需要将文字链接放在一个不起眼的角落,就可以等着收钱了,对读者也几乎没有什么影响,这一点明显优于付费评论,付费评论多了,读者会很

  • Linux 内核剖析 2010-11-27

    转自:http://www.ibm.com/developerworks/cn/linux/l-linux-kernel/ 由于本文的目标是对 Linux 内核进行介绍并探索其体系结构和主要组件,因此首先回顾一下 Linux 的简短历史,然后从较高的层次审视 Linux 内核的体系结构,最后介绍它的主要子系统.Linux 内核具有超过 600 万行的代码,因此本文不可能进行完整的介绍.请使用指向其他内容的链接进一步学习. Linux 的简短历史 尽管 Linux 绝对是最流行的开源操作系统,但是

  • Lisp 的本质(The Nature of Lisp) 2011-10-14

    作者 Slava Akhmechet 译者 Alec Jang 出处: http://www.defmacro.org/ramblings/lisp.html 中文版出处: http://www.cnblogs.com/Leap-abead/articles/762180.html 简介 最初在web的某些角落偶然看到有人赞美Lisp时, 我那时已经是一个颇有经验的程序员.在我的履历上, 掌握的语言范围相当广泛, 象C++, Java, C#主流语言等等都不在话下,我觉得我差不多知道所有的有关编

  • 精选30个优秀的CSS技术和实例 2012-03-09

    收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. 单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例的图片截图可以直接跳转到相应实例的Demo页面. 1.Hoverbox 图片集 一个纯净的基于CSS的图片集,鼠标悬停缩略图就会显示放大效果. 2.高级CSS菜单 一款很有创意且复杂的CSS导航方案. 3.滑动影集 手风琴效果的影

  • 转载sphinx中文手册 2012-08-06

    Coreseek 4.1 参考手册 / Sphinx 2.0.1-beta Sphinx–强大的开源全文检索引擎,Coreseek–免费开源的中文全文检索引擎 版权 © 2001-2011 Andrew Aksyonoff 版权 © 2008-2011 Sphinx Technologies Inc, http://sphinxsearch.com 版权 © 2006-2011 选择软件(Coreseek), nzinfo, <li.monan(at)gmail.com>, HonestQia

  • Lisp 的本质 2012-11-23

    简介 最初在web的某些角落偶然看到有人赞美Lisp时, 我那时已经是一个颇有经验的程序员.在我的履历上, 掌握的语言范围相当广泛, 象C++, Java, C#主流语言等等都不在话下,我觉得我差不多知道所有的有关编程语言的事情.对待编程语言的问题上, 我觉得自己不太会遇到什么大问题.其实我大错特错了. 我试着学了一下Lisp, 结果马上就撞了墙.我被那些范例代码吓坏了.我想很多初次接触Lisp语言的人, 一定也有过类似的感受.Lisp的语法太次了.一个语言的发明人, 居然不肯用心弄出一套漂亮的

  • Java 注解(Annotation)简介 2014-03-24

    自Java5.0版本引入注解之后,它就成为了Java平台中非常重要的一部分.开发过程中,我们也时常在应用代码中会看到 诸如@Override,@Deprecated这样的注解.这篇文章中,我将向大家讲述到底什么是注解,为什么要引入注解,注解是如何工作的, 如何编写自定义的注解(通过例子),什么情况下可以使用注解以及最新注解和ADF(应用开发框架).这会花点儿时间, 所以为自己准备一杯咖啡,让我们来进入注解的世界吧. 1.什么是注解? 用一个词就可以描述注解,那就是元数据,即一种描述数据的数据.所

  • 不要告诉我你懂margin 2014-07-20

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?-- 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解.介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理. Margin是什么 CSS 边距属性定

  • QQ里边挑骨头:从用户心理谈QQ的设计缺憾 2014-04-09

    发短信问某君:觉得QQ有什么不好用的地方?答曰:平时只是聊天,没觉得有什么不好的.作为普通用户,QQ的设计似乎无可挑剔.这里面有两层可能的原因:其一,其设计堪称完美,无可挑剔:其二,用户已经适应了QQ自身的设计,所以感觉不出不好的地方了. 笔者的观点是,QQ的设计趋于完美,但并不是毫无缺憾:用户感觉不到QQ的缺点说明其设计已经具有很好的易用性,但是不排除其中有用户习惯的因素.本文将围绕QQ的核心功能"即时通信"探讨QQ设计的美中不足--虽然这些不足在深度用户看来不是太大的可用性问题,并

  • MySQL数据库命名规范及约定 2014-04-12

    这篇文章主要介绍了MySQL数据库的操作规范及.表名约定.列名约定,需要的朋友可以参考下 一.[操作规范]1. 如无备注,则表中的第一个id字段一定是主键且为自动增长: 2. 如无备注,则数值类型的字段请使用UNSIGNED属性: 3. 如无备注,排序字段order_id在程序中默认使用降序排列: 4. 如无备注,所有字段都设置NOT NULL,并设置默认值: 5. 如无备注,所有的布尔值字段,如is_hot.is_deleted,都必须设置一个默认值,并设为0: 6. 所有的数字类型字段,都必

  • WebApp最佳实践策略篇之审视移动场景的独特性 2014-06-12

    移动场景的相关问题一直困扰着我.在2009年一月,我写过一篇"On the Go" Myth?的文章.许多非常聪明的人受到移动场景的困扰,并认为"移动场景其实被过分夸大了",对于这一现象,我其实并不感到意外. 考虑到我之前对移动场景持有怀疑的态度,你可能认为我会认同现在的"移动场景并不存在"的观点.但事实上,当我阅读了大量关于移动web并不存在的讨论文章和推文后,我发现其实我并不认同这一观点. 这种认识差距到底占据多大的比例?其中相当一大部分与我

  • 关于&lt; tbody &gt;的一个实例,很实用. 2014-06-15

    tbody Tab选项卡效果代码关键只是在<tbody>和选项卡的设置上.我在6个<tr></tr>段分别设置了<tbody></tbody>,目的是为了让一个javascript程序调用6个选项卡的时候可以循环设置tBodies属性.调用的时候是采用了遍历:将6个tBodies先全部都初始化为display='none',然后紧接着将tBodies[n]设置为display='block',将这一个tBodies显示出来. 看到很多网友对tbo

  • 随身携带的设计-手机浏览器手机小结 2015-05-02

    可以随身携带,是移动设备具备的优势,虽说"随身携带"跟设计本身并无太多关系,但想想我们的设计又的确是大家随身携带的,心里不禁有点暗自窃喜,同时,也因此对移动设备的产品设计的要求会更高,因为凡是大家随身携带的东东,必然是大家日常所必需.所钟爱.或者常用的,自然对这些东东的要求就会更高,希望它能够彰显自我的.所以,做随身携带的设计其实更难. 说到手机浏览器,从preview到 beta1版本发布,到目前即将出炉的beta2版本,已经做了近一年的时间,个人感觉麻雀虽小,五脏俱全,手机软件看起