CSSStyleSheet: `replace()` Methode
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.
Die replace()
Methode des CSSStyleSheet
Interfaces ersetzt asynchron den Inhalt des Stylesheets mit dem übergebenen Inhalt. Die Methode gibt ein Versprechen (Promise) zurück, das mit dem CSSStyleSheet
-Objekt aufgelöst wird.
Die replace()
und CSSStyleSheet.replaceSync()
Methoden können nur auf einem Stylesheet verwendet werden, das mit dem CSSStyleSheet()
Konstruktor erstellt wurde.
Syntax
replace(text)
Parameter
text
-
Ein String, der die Stilregeln enthält, um den Inhalt des Stylesheets zu ersetzen. Wenn der String keine analysierbare Liste von Regeln enthält, wird der Wert auf einen leeren String gesetzt.
Hinweis: Wenn eine der in
text
angegebenen Regeln ein externes Stylesheet ist, das mit der@import
Regel importiert wurde, werden diese Regeln entfernt und eine Warnung wird in die Konsole ausgegeben.
Rückgabewert
Ein Promise
, das mit dem CSSStyleSheet
aufgelöst wird.
Ausnahmen
NotAllowedError
DOMException
-
Wird ausgelöst, wenn eine der beiden Bedingungen erfüllt ist:
- Das Stylesheet wurde nicht mit dem
CSSStyleSheet()
Konstruktor erstellt. - Das Stylesheet ist als nicht modifizierbar markiert.
- Das Stylesheet wurde nicht mit dem
Beispiele
Im folgenden Beispiel wird ein neues Stylesheet erstellt und zwei CSS-Regeln werden mit replace()
hinzugefügt. Die erste Regel wird dann in die Konsole ausgegeben und ergibt: body { font-size: 1.4em; }
const stylesheet = new CSSStyleSheet();
stylesheet
.replace("body { font-size: 1.4em; } p { color: red; }")
.then(() => {
console.log(stylesheet.cssRules[0].cssText);
})
.catch((err) => {
console.error("Failed to replace styles:", err);
});
Spezifikationen
Specification |
---|
CSS Object Model (CSSOM) # dom-cssstylesheet-replace |
Browser-Kompatibilität
BCD tables only load in the browser