CSSStyleSheet: CSSStyleSheet() Konstruktor
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
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 Schatten-DOM-Unterbäumen 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 verwendet wird, um relative URLs im Stylesheet aufzulösen. mediaOptional-
Eine
MediaList, die eine Liste von Medientyp-Regeln enthält, oder ein String, der eine einzelne Regel enthält. disabledOptional-
Ein
Boolean, der angibt, ob das Stylesheet deaktiviert ist. Standardmäßig false.
Beispiele
Im folgenden Beispiel wird ein neues CSSStyleSheet mit einer Medienregel "print" konstruiert.
Das Ausdrucken von StyleSheet.media in die Konsole gibt eine MediaList mit einem einzelnen Eintrag für diese Druckregel zurück.
let stylesheet = new CSSStyleSheet({ media: "print" });
console.log(stylesheet.media);
Stylesheets mit einem Shadow DOM teilen
Der untenstehende Code zeigt, wie das Stylesheet konstruiert wird, und anschließend wird CSSStyleSheet.replaceSync() aufgerufen, um eine Regel zu dem 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 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 nach der Hinzufügung zum Array ändern.
Unten fügen wir eine neue Regel zu demselben Stylesheet mit CSSStyleSheet.insertRule() hinzu.
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.
Dasselbe Stylesheet kann mit mehreren Schatten-Unterbäumen im gleichen Dokument geteilt werden.
Für weitere Beispiele siehe ShadowRoot.adoptedStyleSheets.
Spezifikationen
| Spezifikation |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-cssstylesheet |
