关于HTML Object中三个Style实例的区别

简介:

 我们在网页元素中定义的CSS属性,会被映射成该DHTML对象中Style对象(不是Style Tag对象)的实例。我们可以使用import-style[1]和inline-style[2]为网页元素指定CSS属性,同时也可以使用element. style. attributeName = '...'的形式在Web页脚本中设置其值。但是同一个元素上的这些CSS属性值并不是都叠加后映射到同一个Style对象的实例上。

    我们使用脚本最常访问的Style对象,一般是element[3].style,但是这个对象只能反映出inline-style和使用脚本设置的样式值。同时这个element.style是不能访问元素的import-style的属性设置的。如果非要访问,可以使用styleSheets集合,在里面遍历获得元素的import-style属性,不过这样太麻烦了

    在IE5.0及以后,微软为HTML Object提供了两个新的Style对象实例,分别是:currentStyle和runtimeStyle。

    currentStyle可以获元素的实际表现出来的CSS属性,就是说除了inline-style、import-style外,还包括了HTML元素属性的设置和HTML元素默认属性的累加。累加的默认优先级是:inline-style > import-style > HTML Attribute > HTML default。例如:<div style="display:inline"></div>。其currentStyle.display将会是inline,虽然div本身默认的display是block。不过对于inline-style和import-style的优先级不是绝对的,它俩还可以使用 ! important限定符来定制优先级,当然要是都使用了 ! important限定,就和都没有用一样。同时currentStyle还可以获取display属性为none的元素的CSS属性,得到的属性值和其显示时的值相同。由于currentStyle是一个异步对象,其实际取值依赖于它的实际显示状态,而不依赖于脚本对style的赋值。

    runtimeStyle也是Style对象的实例,所有的runtimeStyle的属性在默认状态下都是为空的(就是没有指定值)。那么它是用来干什么的呢?这个属性和style基本没有什么关系,顾名思义,它是在运行时刻控制元素的CSS属性的,设置了runtimeStyle后会影响currentStyle的对应属性值,同时也会在HTML元素的显示上表现出来。它的最大特点是,当我们把修改过的CSS属性的值再次清掉(赋'')的时候,其HTML元素的CSS属性会变为赋值前的值,同时currentStyle也还原了。runtimeStyle设置的属性具有最高的优先级,但是它不是永久的。

    style的用途不说了,太easy。currentStyle用来取元素实际表现得CSS属性。而runtimeStyle的用途除了本页提供的"Resume"功能这种情况外,想了半天再也想不出啥别的大作用了。

 

    [1]. import-style是指在HTML元素中使用class属性或者使用其id等直接为元素指派的外部CSS属性。例如:<div class="fontSize"></div>。

    [2]. inline-style是指在HTML元素中使用style属性直接为其指派的CSS属性。例如:<div style="width: 100%; height: 100%"></div>。

    [3]. 泛指Web页中的HTML标签元素。


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

目录
相关文章
|
1月前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
2月前
|
XML 数据格式
HTML 实例解析
本文介绍了HTML中常见元素的使用方法,包括`&lt;p&gt;`、`&lt;body&gt;`和`&lt;html&gt;`等。详细解析了这些元素的结构和作用,并强调了正确使用结束标签的重要性。此外,还提到了空元素的使用及大小写标签的规范。
|
3月前
|
前端开发
HTML 颜色的不用写法和最终显示效果的区别
HTML 中色彩的指定有多种方式,包括十六进制(如 `#FF5733`)、RGB(如 `rgb(255, 87, 51)`)、RGBA(如 `rgba(255, 87, 51, 0.5)`)、HSL(如 `hsl(14, 100%, 60%)`)、HSLA(如 `hsla(14, 100%, 60%, 0.5)`)以及直接使用颜色名称(如 `orange`)。这些方法虽然最终显示效果可能相同,但在使用场景和灵活性上各具优势。十六进制和 RGB 更常用,HSL 则便于调整颜色属性,而 RGBA 和 HSLA 增加了透明度选项,颜色名称则提高了代码的可读性。
WK
|
3月前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
61 3
|
3月前
|
前端开发 JavaScript
html中id和class的相同和不同之处及用法的规范与区别
在HTML中,`id`和`class`都用于标识和选择元素,但存在一些关键差异。
|
4月前
|
前端开发 Java 编译器
【前端学java】java中的Object类和前端中的Object有什么区别(9)
【8月更文挑战第10天】java中的Object类和前端中的Object有什么区别
50 0
【前端学java】java中的Object类和前端中的Object有什么区别(9)
|
4月前
|
移动开发 前端开发 API
React路由和HTML5 History API有什么区别
【8月更文挑战第11天】React路由和HTML5 History API有什么区别
50 1
|
4月前
|
JavaScript 前端开发
Object.freeze() 和 const 的区别详解
【8月更文挑战第31天】
38 0
|
4月前
|
移动开发 前端开发 JavaScript
|
4月前
|
移动开发 编解码 UED
HTML5 中字体大小单位 em 和 rem 的区别
【8月更文挑战第24天】
255 0