CSSStyleSheet: replace() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2023⁩.

Thereplace() method of theCSSStyleSheet interface asynchronously replaces the content of the stylesheet with the content passed into it. The method returns a promise that resolves with theCSSStyleSheet object.

Thereplace() andCSSStyleSheet.replaceSync() methods can only be used on a stylesheet created with theCSSStyleSheet() constructor.

Syntax

replace(text)

Parameters

text: A string containing the style rules to replace the content of the stylesheet. If the string does not contain a parsable list of rules, then the value will be set to an empty string.
Note:If any of the rules passed intext are an external stylesheet imported with the@import rule, those rules will be removed, and a warning printed to the console.

Return value

APromise that resolves with theCSSStyleSheet.

Exceptions

NotAllowedErrorDOMException

Thrown if one of these two conditions is met:

The stylesheet was not created using theCSSStyleSheet() constructor.
The stylesheet is flagged as unmodifiable.

Examples

In the following example a new stylesheet is created and two CSS rules are added usingreplace(). The first rule is then printed to the console, which will return: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);  });