CSSStyleSheet
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Die CSSStyleSheet Schnittstelle repräsentiert ein einzelnes CSS Stylesheet und ermöglicht es Ihnen, die Liste der in dem Stylesheet enthaltenen Regeln zu inspizieren und zu ändern. Sie erbt Eigenschaften und Methoden von ihrem Elternobjekt, StyleSheet.
Ein Stylesheet besteht aus einer Sammlung von CSSRule-Objekten, die jeweils eine der Regeln im Stylesheet repräsentieren. Die Regeln sind in einer CSSRuleList enthalten, die aus der cssRules-Eigenschaft des Stylesheets abgerufen werden kann.
Zum Beispiel könnte eine Regel ein CSSStyleRule-Objekt sein, das einen Stil wie folgt enthält:
h1,
h2 {
font-size: 16pt;
}
Eine andere Regel könnte eine at-rule wie @import oder @media sein, und so weiter.
Sehen Sie sich den Abschnitt Ein Stylesheet erlangen an, um die verschiedenen Möglichkeiten zu erfahren, wie ein CSSStyleSheet-Objekt erlangt werden kann. Ein CSSStyleSheet-Objekt kann auch direkt erstellt werden. Der Konstruktor sowie die Methoden CSSStyleSheet.replace() und CSSStyleSheet.replaceSync() sind neuere Ergänzungen zur Spezifikation, die konstruktierbare Stylesheets ermöglichen.
Um ein CSSStyleSheet auf ein Dokument oder eine Shadow-Root anzuwenden, weisen Sie es der Document.adoptedStyleSheets oder ShadowRoot.adoptedStyleSheets-Eigenschaft zu.
Konstruktor
CSSStyleSheet()-
Erstellt ein neues
CSSStyleSheet-Objekt.
Instanz-Eigenschaften
Erbt Eigenschaften von ihrem Elternobjekt, StyleSheet.
CSSStyleSheet.cssRulesSchreibgeschützt-
Gibt eine live
CSSRuleListzurück, die eine aktuelle Liste derCSSRule-Objekte enthält, aus der das Stylesheet besteht.Hinweis: In einigen Browsern führt der Zugriff auf
cssRuleszu einemSecurityError, wenn ein Stylesheet von einer anderen Domain geladen wird. CSSStyleSheet.ownerRuleSchreibgeschützt-
Wenn dieses Stylesheet über eine
@import-Regel in das Dokument importiert wird, gibt dieownerRule-Eigenschaft die entsprechendeCSSImportRulezurück; andernfalls ist der Wert dieser Eigenschaftnull.
Instanz-Methoden
Erbt Methoden von ihrem Elternobjekt, StyleSheet.
CSSStyleSheet.deleteRule()-
Löscht die Regel an dem angegebenen Index in der Regel-Liste des Stylesheets.
CSSStyleSheet.insertRule()-
Fügt eine neue Regel an der angegebenen Position im Stylesheet ein, wobei die textliche Darstellung der Regel angegeben wird.
CSSStyleSheet.replace()-
Ersetzt asynchron den Inhalt des Stylesheets und gibt einen
Promisezurück, der sich mit dem aktualisiertenCSSStyleSheetauflöst. CSSStyleSheet.replaceSync()-
Ersetzt synchron den Inhalt des Stylesheets.
Veraltete Eigenschaften
Diese Eigenschaften sind veraltete Eigenschaften, die von Microsoft eingeführt wurden; sie werden zur Kompatibilität mit bestehenden Webseiten beibehalten.
rulesSchreibgeschützt Veraltet-
Die
rules-Eigenschaft ist funktional identisch mit der Standard-cssRules-Eigenschaft; sie gibt eine liveCSSRuleListzurück, die eine aktuelle Liste aller Regeln im Stylesheet beibehält.
Veraltete Methoden
Diese Methoden sind veraltete Methoden, die von Microsoft eingeführt wurden; sie werden zur Kompatibilität mit bestehenden Webseiten beibehalten.
addRule()Veraltet-
Fügt eine neue Regel zum Stylesheet hinzu, basierend auf dem Selektor, auf den der Stil angewendet werden soll, und dem Stilblock, der auf die passenden Elemente angewendet werden soll.
Dies unterscheidet sich von
insertRule(), das die textliche Darstellung der gesamten Regel als einen einzigen String nimmt. removeRule()Veraltet-
Funktional identisch zu
deleteRule(); entfernt die Regel an dem angegebenen Index aus der Regel-Liste des Stylesheets.
Ein Stylesheet erlangen
Ein Stylesheet ist mit höchstens einem Document verknüpft, auf das es angewendet wird (es sei denn, es ist deaktiviert). Eine Liste von CSSStyleSheet-Objekten für ein gegebenes Dokument kann mit der Document.styleSheets-Eigenschaft abgerufen werden. Ein bestimmtes Stylesheet kann auch über sein Eigentümer-Objekt (Node oder CSSImportRule), falls vorhanden, zugegriffen werden.
Ein CSSStyleSheet-Objekt wird automatisch vom Browser erstellt und in die Document.styleSheets-Liste des Dokuments eingefügt, wenn ein Stylesheet für ein Dokument geladen wird.
Eine (möglicherweise unvollständige) Liste von Möglichkeiten, wie ein Stylesheet mit einem Dokument verknüpft werden kann, folgt:
| Grund, warum das Stylesheet mit dem Dokument verknüpft ist |
Erscheint in document.-Liste
|
Den Eigentümer-Element/Regel aus dem Stylesheet-Objekt ermitteln | Das Interface für das Eigentümerobjekt | Das CSSStyleSheet-Objekt aus dem Eigentümer erhalten |
|---|---|---|---|---|
<style> und <link>
-Elemente im Dokument
|
Ja | [`.ownerNode`](/de/docs/Web/API/StyleSheet/ownerNode) |
[`HTMLLinkElement`](/de/docs/Web/API/HTMLLinkElement), [`HTMLStyleElement`](/de/docs/Web/API/HTMLStyleElement), oder [`SVGStyleElement`](/de/docs/Web/API/SVGStyleElement) |
[`HTMLLinkElement.sheet`](/de/docs/Web/API/HTMLLinkElement/sheet), [`HTMLStyleElement.sheet`](/de/docs/Web/API/HTMLStyleElement/sheet), oder [`SVGStyleElement.sheet`](/de/docs/Web/API/SVGStyleElement/sheet) |
CSS @import-Regel in anderen Stylesheets, die auf
das Dokument angewendet werden
|
Ja | [`.ownerRule`](/de/docs/Web/API/CSSStyleSheet/ownerRule) | [`CSSImportRule`](/de/docs/Web/API/CSSImportRule) | [`.styleSheet`](/de/docs/Web/API/CSSImportRule/styleSheet) |
<?xml-stylesheet ?>-Verarbeitungsanweisung im
(nicht-HTML-) Dokument
|
Ja | [`.ownerNode`](/de/docs/Web/API/StyleSheet/ownerNode) | [`ProcessingInstruction`](/de/docs/Web/API/ProcessingInstruction) | [`.sheet`](/de/docs/Web/API/ProcessingInstruction/sheet) |
JavaScript import ... with { type: "css" }
|
Nein | N/A | N/A | N/A |
| HTTP Link-Header | Ja | N/V | N/A | N/A |
| Benutzeragent (Standard-) Stylesheets | Nein | N/A | N/A | N/A |
Spezifikationen
| Specification |
|---|
| CSS Object Model (CSSOM) # the-cssstylesheet-interface |