CSSStyleSheet

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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 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 jeweils eine der Regeln im Stylesheet repräsentieren. Die Regeln sind in einer CSSRuleList enthalten, die über die cssRules-Eigenschaft des Stylesheets abgerufen werden kann.

Ein Beispiel für eine Regel könnte ein CSSStyleRule-Objekt mit einem Stil wie:

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 Ein Stylesheet erhalten für die verschiedenen Möglichkeiten, ein CSSStyleSheet-Objekt zu erhalten. Ein CSSStyleSheet-Objekt kann auch direkt konstruiert werden. Der Konstruktor und die Methoden CSSStyleSheet.replace() und CSSStyleSheet.replaceSync() sind neuere Ergänzungen zur Spezifikation, die konstruktionsfähige Stylesheets ermöglichen.

Konstruktor

CSSStyleSheet(): Erstellt ein neues CSSStyleSheet-Objekt.

Instanzeigenschaften

Erbt Eigenschaften von seinem Elternteil, StyleSheet.

CSSStyleSheet.cssRules Schreibgeschützt: 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 das Zugreifen auf cssRules zu einem SecurityError, wenn ein Stylesheet von einer anderen Domain geladen wird.
CSSStyleSheet.ownerRule Schreibgeschützt: Wenn dieses Stylesheet mit einer @import-Regel in das Dokument importiert wird, gibt die Eigenschaft ownerRule die entsprechende CSSImportRule zurück; andernfalls ist der Wert dieser Eigenschaft null.

Instanzmethoden

Erbt Methoden von seinem Elternteil, StyleSheet.

CSSStyleSheet.deleteRule(): Löscht die Regel am 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 den Inhalt des Stylesheets synchron.

Veraltete Eigenschaften

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

rules Schreibgeschützt Veraltet: Die rules-Eigenschaft ist funktional identisch mit der Standard-cssRules-Eigenschaft; sie gibt eine Live-CSSRuleList zurück, die eine aktuelle Liste aller Regeln im Stylesheet enthält.

Veraltete Methoden

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

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 angewendet werden soll.

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

removeRule() Veraltet

Funktional identisch mit deleteRule(); entfernt die Regel am angegebenen Index aus der Regel-Liste des Stylesheets.

Ein Stylesheet erhalten

Ein Stylesheet ist mit höchstens einem Document assoziiert, 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 spezifisches Stylesheet kann auch über sein Besitzerobjekt (Node oder CSSImportRule), falls vorhanden, aufgerufen werden.

Ein CSSStyleSheet-Objekt wird automatisch von dem Browser erstellt und in die Liste des Dokuments, Document.styleSheets, 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 der `document. styleSheets`-Liste	Ermitteln des Besitzer-Elements/regel anhand des Stylesheet-Objekts	Die Schnittstelle für das Besitzerobjekt	Abrufen des CSSStyleSheet-Objekts vom Besitzer
`<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 auf das Dokument angewendeten Stylesheets	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