Was ist der Unterschied zwischen HTMLStyleElement und CSSStyleElement?

Question

Ich habe ein wenig in Style Sheets gegraben, ich habe versucht, auf ein </code> Tag zuzugreifen, genauso wie ich auf ein <strong>styleSheet</strong> Element zugreifen konnte, zum Beispiel.</p> <pre><code><style id="myStyle"> var myStyle = document.getElementById("myStyle"); alert(myStyle.cssRules[0]);

Aber das hat nicht funktioniert, also habe ich beschlossen, den Typ des </code> Tags zu überprüfen.</p> <pre><code>alert(myStyle); </code></pre> <p>Und das hat mir das hier gegeben:</p> <pre><code>[object HTMLStyleElement] </code></pre> <p>Also habe ich den Typ eines styleSheet überprüft.</p> <pre><code>alert(document.styleSheets[0]); </code></pre> <p>Und das hat mir das hier gegeben:</p> <p><code>[object CSSStyleElement]</code></p> <p>Also, was ist der wirkliche Unterschied? Und wie kann ich die Regeln im <code><style></code> Tag aufrufen, ohne <code>.innerHTML</code> zu verwenden? Und wie kann ich ein neues <code>styleSheet</code> erstellen?</p></x-turndown>

Answer 1

Es gibt tatsächlich einen großen Unterschied.

HTMLStyleElement ist tatsächlich eine Art von HTMLElement - ein Wrapper, der eine DOM-Struktur enthält. Das Tolle daran ist, dass es auch das LinkStyle Interface implementiert und uns daher die Möglichkeit gibt, auf sein zugrunde liegendes stylesheet (über die sheet Eigenschaft) zuzugreifen.

CSSStyleSheet hingegen ist nicht mit dem DOM verbunden - es ist ein spezifischer Wrapper für CSS-Stylesheets (die CSS-Regeln enthalten). Es ermöglicht Ihnen, CSS-Styling über die Methoden deleteRule und insertRule zu manipulieren oder eine vorhandene Regel zu ändern (über die style Eigenschaft).

Um Ihre spezifische Frage zu beantworten, überprüfen Sie das Folgende:

HTML:

    p { background-color: lime; }

JS:

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

Wie Sie sehen, greifen wir hier zunächst auf das von #myStyle Element umschlossene CSSStyleSheet zu, dann auf seine spezifische Regel (CSSRule) und schließlich auf deren Text.

P.S. Ich habe ein kleines Demo erstellt, das zeigt, wie man Stylesheets dynamisch manipulieren kann. Es ist nicht besonders schön, und aus gutem Grund: Die Präsentation durch den Austausch von Klassen zu ändern, ist eine viel bessere Technik. Dennoch kann es auch auf diese Weise gemacht werden. )