Baseline 2023 *
Newly available
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.
new CSSStyleSheet()
new CSSStyleSheet(options)
options Optional
Ein Objekt, das Folgendes enthält:
baseURL Optional
Ein String, der die baseURL enthält, die zur Auflösung relativer URLs im Stylesheet verwendet wird.
media Optional
Eine MediaList, die eine Liste von Medientypen enthält, oder ein String mit einer einzigen Regel.
disabled Optional
Ein Boolean, das angibt, ob das Stylesheet deaktiviert ist. StandardmäÃig falsch.
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);
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.
Diese Seite wurde automatisch aus dem Englischen übersetzt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4