3

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

<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？

4

1 回答 1

6

其实还是有很大区别的。

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 )，然后访问其文本。

PS 我写了一个小演示来说明如何动态操作样式表。这并不漂亮，并且有一个原因：通过交换类来改变表示是更好的技术。不过，即使这样也可以做到。)

于 2013-05-23T07:20:56.267 回答