style, currentStyle, runtimeStyle

原创于 2011-07-27 15:09:29 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文详细解释了CSS中样式的不同应用方式及其优先级：内嵌样式、内部样式、外部样式及浏览器默认样式。并通过一个具体示例展示了runtimeStyle如何成为最高优先级样式。

样式(Styles)的优先级依次是内嵌(inline), 内部(internal), 外部(external), 浏览器缺省(browser default)。

style:
元素内联样式，对应于元素的style属性，指定了才可以获得，通过外联或在style元素中指定样式取不到值，el.style.xx这种设置方式是设置了元素的内联样式

currentStyle：
它能够获取元素所有的style，但它也按照优先级，形象的说就是你看到的是什么，它就是什么

runtimeStyle：
如果设置它，他就成为优先级最高的样式，显示也会相应改变

例子：

<body>
<div id="id" style="color:blue;">1111</div>
</body>
<script type="text/javascript">
var d = document.getElementById("id");
d.runtimeStyle.color="black";

alert(d.currentStyle.color);
alert(d.runtimeStyle.color);
alert(d.style.color);

</script>

打印：
black
black
blue

说明style只能取到内联样式，runtimeStyle可以成为最高优先级，currentStyle指向当前显示样式