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

js
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.

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; }

js
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

Siehe auch