javascript - HTMLStyleElement 和 CSSStyleElement 有什么区别

Question

我一直在深入研究样式表，我试图访问 <style>例如，以访问 styleSheet 元素的相同方式标记。

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

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

但这没有用，然后我决定检查 <style> 的类型标签。

alert(myStyle);

它给了我这个:

[object HTMLStyleElement]

所以我检查了样式表的类型。

alert(document.styleSheets[0]);

它给了我这个:

[object CSSStyleElement]

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

Answer 1

其实还是有很大区别的。

HTMLStyleElement其实是HTMLElement的味道- 一个包含一些 DOM 结构的包装器。它的优点在于它实现了 LinkStyle接口(interface)，因此使我们能够访问其底层 stylesheet(通过 sheet 属性)。

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

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

HTML:

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

JS:

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

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

附言我写了一个小demo说明如何动态地操作样式表。这不是很漂亮，并且有一个原因:通过交换类来改变表示是更好的技术。尽管如此，它甚至可以通过这种方式完成。 )