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.
Nachdem ein Stylesheet konstruiert 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-Subtrees mit 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 zur Auflösung relativer URLs im Stylesheet verwendet wird. mediaOptional-
Eine
MediaList, die eine Liste von Medientypen enthält, oder ein String mit einer einzigen Regel. disabledOptional-
Ein
Boolean, das angibt, ob das Stylesheet deaktiviert ist. Standardmäßig falsch.
Beispiele
Im folgenden Beispiel wird ein neues CSSStyleSheet mit einer Medienregel von "print" konstruiert. 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 das konstruierte Stylesheet und dann wird CSSStyleSheet.replaceSync() aufgerufen, um eine Regel zum Stylesheet 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 Eigenschaft ShadowRoot.adoptedStyleSheets 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 gleichen Stylesheet mit CSSStyleSheet.insertRule() hinzu.
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.
Dasselbe Stylesheet kann mit mehreren Shadow-Subtrees im gleichen Dokument geteilt werden. Weitere Beispiele finden Sie unter ShadowRoot.adoptedStyleSheets.
Spezifikationen
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-cssstylesheet |