CSSStyleSheet

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die CSSStyleSheet-Schnittstelle repräsentiert ein einzelnes CSS-Stylesheet und ermöglicht es Ihnen, die Liste der im Stylesheet enthaltenen Regeln zu inspizieren und zu modifizieren. Sie erbt Eigenschaften und Methoden von ihrem Elternteil, StyleSheet.

Ein Stylesheet besteht aus einer Sammlung von CSSRule-Objekten, die jede der Regeln im Stylesheet darstellen. Die Regeln sind in einer CSSRuleList enthalten, die über die cssRules-Eigenschaft des Stylesheets abgerufen werden kann.

Zum Beispiel könnte eine Regel ein CSSStyleRule-Objekt sein, das einen Stil wie folgt enthält:

css

h1,
h2 {
  font-size: 16pt;
}

Eine andere Regel könnte eine at-rule wie @import oder @media sein und so weiter.

Siehe den Abschnitt Abrufen eines StyleSheets für die verschiedenen Möglichkeiten, wie ein CSSStyleSheet-Objekt abgerufen werden kann. Ein CSSStyleSheet-Objekt kann auch direkt konstruiert werden. Der Konstruktor sowie die Methoden CSSStyleSheet.replace() und CSSStyleSheet.replaceSync() sind neuere Ergänzungen zur Spezifikation und ermöglichen konstruierbare Stylesheets.

Konstruktor

CSSStyleSheet(): Erstellt ein neues CSSStyleSheet-Objekt.

Instanz-Eigenschaften

Erbt Eigenschaften von ihrem Elternteil, StyleSheet.

CSSStyleSheet.cssRules Nur lesbar: Gibt eine Live-CSSRuleList zurück, die eine aktuelle Liste der CSSRule-Objekte enthält, die das Stylesheet bilden.

Hinweis: In einigen Browsern führt der Zugriff auf cssRules zu einem SecurityError, wenn ein Stylesheet von einer anderen Domäne geladen wird.
CSSStyleSheet.ownerRule Nur lesbar: Wenn dieses Stylesheet mit einer @import-Regel in das Dokument importiert wird, gibt die ownerRule-Eigenschaft die entsprechende CSSImportRule zurück; andernfalls ist der Wert dieser Eigenschaft null.

Instanz-Methoden

Erbt Methoden von ihrem Elternteil, 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, basierend auf der textuellen Darstellung der Regel.
CSSStyleSheet.replace(): Ersetzt asynchron den Inhalt des Stylesheets und gibt ein Promise zurück, das mit dem aktualisierten CSSStyleSheet aufgelöst wird.
CSSStyleSheet.replaceSync(): Ersetzt synchron den Inhalt des Stylesheets.

Veraltete Eigenschaften

Diese Eigenschaften sind veraltete Eigenschaften, die von Microsoft eingeführt wurden und zur Kompatibilität mit bestehenden Websites beibehalten werden.

rules Nur lesbar Veraltet: Die rules-Eigenschaft ist funktionell identisch mit der standardmäßigen cssRules-Eigenschaft; sie gibt eine Live-CSSRuleList zurück, die eine aktualisierte Liste aller Regeln im Stylesheet enthält.

Veraltete Methoden

Diese Methoden sind veraltete Methoden, die von Microsoft eingeführt wurden und zur Kompatibilität mit bestehenden Websites beibehalten werden.

addRule() Veraltet

Fügt eine neue Regel zum Stylesheet hinzu, basierend auf dem Selektor, auf den der Stil angewendet wird, und dem Stilblock, der auf die übereinstimmenden Elemente anzuwenden ist.

Dies unterscheidet sich von insertRule(), welches die textuelle Darstellung der gesamten Regel als einzelne Zeichenkette erfordert.

removeRule() Veraltet

Funktionell identisch mit deleteRule(); entfernt die Regel an dem angegebenen Index aus der Regel-Liste des Stylesheets.

Abrufen eines StyleSheets

Ein Stylesheet ist mit maximal einem Document verknüpft, auf das es angewendet wird (es sei denn, disabled). Eine Liste von CSSStyleSheet-Objekten für ein bestimmtes Dokument kann über die Document.styleSheets-Eigenschaft abgerufen werden. Ein spezifisches Stylesheet kann auch von seinem Owner-Objekt (Node oder CSSImportRule), falls zutreffend, abgerufen werden.

Ein CSSStyleSheet-Objekt wird automatisch vom Browser erstellt und in die Liste der Document.styleSheets eines Dokuments eingefügt, wenn ein Stylesheet für ein Dokument geladen wird.

Eine (möglicherweise unvollständige) Liste der Wege, wie ein Stylesheet mit einem Dokument verknüpft werden kann, folgt:

Grund für die Verknüpfung des Stylesheets mit dem Dokument	Erscheint in `document. styleSheets`-Liste	Ermittelt das Eigentümer-Element/die Regel für das Stylesheet-Objekt	Die Schnittstelle für das Eigentümer-Objekt	Ermittelt das CSSStyleSheet-Objekt vom Eigentümer
`<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/A	N/A	N/A
User-Agent (Standard) Stylesheets	Nein	N/A	N/A	N/A

Spezifikationen

Specification
CSS Object Model (CSSOM) # the-cssstylesheet-interface

Browser-Kompatibilität

BCD tables only load in the browser