HTMLStyleElement和CSSStyleElement有什么区别

Question

我一直在样式表中挖掘一点,我试图以<style>与访问styleSheet元素相同的方式访问标记.

<style id="myStyle">
</style>

var myStyle = document.getElementById("myStyle");
alert(myStyle.cssRules[0]);

但这不起作用,然后我决定检查<style>标签的类型.

alert(myStyle);

它给了我这个:

[object HTMLStyleElement]

所以我检查了styleSheet的类型.

alert(document.styleSheets[0]);

它给了我这个:

[object CSSStyleElement]

那真正的区别是什么？<style>除了使用之外,我如何访问标签中的规则.innerHTML？我怎样才能创造一个新的styleSheet？

Answer 1

实际上有很大的不同.

HTMLStyleElement实际上是HTMLElement的一种风格- 包含一些DOM结构的包装器.它的优点在于它也实现了LinkStyle接口,因此使我们能够访问其底层stylesheet(via sheet属性).

相反,CSSStyleSheet与DOM无关 - 它是CSS样式表(包含CSS规则)的特定包装器.它允许您通过deleteRule和insertRule方法或通过更改现有规则(通过style属性)来操作CSS样式.

回答您的具体问题,请检查以下内容:

HTML:

<style id="myStyle">
    p { background-color: lime; }
</style>

JS:

var myStyle = document.getElementById("myStyle");
alert(myStyle.sheet.cssRules[0].cssText);

如您所见,这里我们首先访问由#myStyleelement 包装的CSSStyleSheet ,然后访问其特定规则(CSSRule),然后访问其文本.

PS我写了一个小演示,演示了如何动态操作样式表.它并不漂亮,并且有一个原因:通过交换类来改变演示是更好的技巧.尽管如此,它仍然可以这样做.)