HTMLStyleElement和CSSStyleElement有什么区别

Question

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

<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（通过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);

如您所见，这里我们首先访问由#myStyle元素包装的CSSStyleSheet，然后访问其特定规则（CSSRule），然后访问其文本。

P.S。我写了一个小demo来说明如何动态操作样式表。它并不漂亮，并且有一个原因：通过交换类来改变演示是更好的技巧。尽管如此，它仍然可以这样做。 ）