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.
* Some parts of this feature may have varying levels of support.
Der CSSStyleSheet() Konstruktor erstellt ein neues CSSStyleSheet Objekt, das ein einzelnes Stylesheet repräsentiert.
Nach dem Erstellen eines Stylesheets 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 Schatten-DOM-Unterbäumen mittels ShadowRoot.adoptedStyleSheets und Document.adoptedStyleSheets geteilt werden.
Syntax
new CSSStyleSheet()
new CSSStyleSheet(options)
Parameter
optionsOptional-
Ein Objekt, das Folgendes enthält:
baseURLOptional-
Ein String, der die
baseURLenthält, die zum Auflösen relativer URLs im Stylesheet verwendet wird. mediaOptional-
Eine
MediaList, die eine Liste von Mediensregeln enthält, oder ein String, der eine einzelne Regel enthält. disabledOptional-
Ein
Boolean, der angibt, ob das Stylesheet deaktiviert ist. Standardmäßig falsch.
Beispiele
Im folgenden Beispiel wird ein neues CSSStyleSheet mit einer Medienregel von "print" erstellt.
Das Ausdrucken von StyleSheet.media in die Konsole gibt eine MediaList mit einem einzigen Eintrag für diese Druckregel zurück.
let stylesheet = new CSSStyleSheet({ media: "print" });
console.log(stylesheet.media);
Teilung von Stylesheets mit einem Shadow-DOM
Der untenstehende Code zeigt, wie das Stylesheet erstellt wird und dann CSSStyleSheet.replaceSync() aufgerufen wird, um der Liste eine Regel hinzuzufügen.
// 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 ShadowRoot.adoptedStyleSheets Eigenschaft innerhalb eines Arrays.
// 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 zum selben Stylesheet hinzu, indem wir CSSStyleSheet.insertRule() verwenden.
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.
Dasselbe Stylesheet kann mit mehreren Schatten-Unterbäumen im selben Dokument geteilt werden.
Weitere Beispiele finden Sie unter ShadowRoot.adoptedStyleSheets.
Spezifikationen
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-cssstylesheet |