CSSStyleSheet.replace()

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

The replace() and CSSStyleSheet.replaceSync() methods can only be used on a stylesheet created with the CSSStyleSheet() constructor.

text

A string containing the style rules to replace the content of the stylesheet. If the string does not contain a parseable list of rules, then the value will be set to an empty string.

A Promise that resolves with a CSSStyleSheet.

DOMException NotAllowedError

Thrown if the stylesheet was not created using the CSSStyleSheet() constructor.

DOMException NotAllowedError

If the stylesheet is flagged as unmodifiable.

In the following example a new stylesheet is created and two CSS rules are added using replace(). The first rule is then printed to the console, which will return: body { font-size: 1.4em };

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