CSSStyleSheet: CSSStyleSheet() Konstruktor

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Der CSSStyleSheet() Konstruktor erstellt ein neues CSSStyleSheet-Objekt, das ein einzelnes Stylesheet repräsentiert.

Nachdem ein Stylesheet erstellt wurde, können die Methoden CSSStyleSheet.replace(), CSSStyleSheet.replaceSync(), CSSStyleSheet.insertRule() und CSSStyleSheet.deleteRule() verwendet werden, um die Regeln des neuen Stylesheets zu ändern.

Ein mit dieser Methode erstelltes Stylesheet wird als "konstruiertes Stylesheet" bezeichnet. Ein konstruiertes Stylesheet kann zwischen einem Dokument und seinen Shadow-DOM-Unterbäumen mithilfe von ShadowRoot.adoptedStyleSheets und Document.adoptedStyleSheets geteilt werden.

Syntax

js
new CSSStyleSheet()
new CSSStyleSheet(options)

Parameter

options Optional

Ein Objekt, das Folgendes enthält:

baseURL Optional

Ein String, der die baseURL enthält, die verwendet wird, um relative URLs im Stylesheet aufzulösen.

media Optional

Eine MediaList mit einer Liste von Media-Regeln oder ein String, der eine einzelne Regel enthält.

disabled Optional

Ein Boolean, der angibt, ob das Stylesheet deaktiviert ist. Standardmäßig false.

Beispiele

Im folgenden Beispiel wird ein neues CSSStyleSheet mit einer Media-Regel "print" erstellt. Das Drucken von StyleSheet.media auf die Konsole gibt eine MediaList mit einem einzigen Eintrag für diese Druckregel zurück.

js
let stylesheet = new CSSStyleSheet({ media: "print" });
console.log(stylesheet.media);

Stylesheets mit einem Shadow-DOM teilen

Der unten stehende Code zeigt, wie das Stylesheet konstruiert wird und dann CSSStyleSheet.replaceSync() aufgerufen wird, um eine Regel zum Stylesheet hinzuzufügen.

js
// Create an empty "constructed" stylesheet
const sheet = new CSSStyleSheet();
// Apply a rule to the sheet
sheet.replaceSync("a { color: red; }");

Wir erstellen dann ein ShadowRoot und übergeben das Stylesheet-Objekt der Eigenschaft ShadowRoot.adoptedStyleSheets innerhalb eines Arrays.

js
// Create an element in the document and then create a shadow root:
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });

//Adopt the sheet into the shadow DOM
shadow.adoptedStyleSheets = [sheet];

Wir können die Stylesheets ändern, nachdem sie dem Array hinzugefügt wurden. Unten fügen wir eine neue Regel zu demselben Stylesheet hinzu, indem wir CSSStyleSheet.insertRule() verwenden.

js
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.

Dasselbe Stylesheet kann mit mehreren Shadow-Unterbäumen im selben Dokument geteilt werden. Weitere Beispiele finden Sie unter ShadowRoot.adoptedStyleSheets.

Spezifikationen

Specification
CSS Object Model (CSSOM)
# dom-cssstylesheet-cssstylesheet

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch