Javascript HTMLStyleElement和CSSStyleElement之间有什么区别

我在样式表中挖掘了一点，我试图访问

标记，就像访问样式表元素一样

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

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

它给了我这个：

[object HTMLStyleElement]

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

alert(document.styleSheets[0]);

它给了我这个：

[对象CSSStyleElement]

---

那么真正的区别是什么呢？除了使用

.innerHTML

之外，我如何访问

标记中的规则？如何创建新的

样式表

实际上有很大的区别

实际上是一种风格——一种包含某种DOM结构的包装器。它的优点在于它还实现了接口，因此使我们能够访问其底层的

样式表

（通过

工作表

属性）

相反，它与DOM无关——它是CSS样式表（包含CSS规则）的特定包装器。它允许您通过和方法或通过更改现有规则（通过

style

property）来操纵CSS样式

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

HTML:

如您所见，这里我们首先访问由

#myStyle

元素包装的CSSStyleSheet，然后访问它的特定规则（），然后访问它的文本

---

另外，我写了一个小例子来说明如何动态地操作样式表。这并不漂亮，原因是：通过交换类来改变表示方式是一种更好的技术。不过，即使这样也可以做到。）

要创建新的样式表，请看这里：很高兴能提供帮助，也可以查看演示。）

alert(document.styleSheets[0]);

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

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