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.

Syntax

CSSStyleSheet.replace(text);

Parameters

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.

Note: If any of the rules passed in text are an external stylesheet imported with the @import rule, those rules will be removed, and a warning printed to the console.

Return value

A Promise that resolves with a CSSStyleSheet.

Exceptions

DOMException NotAllowedError

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

DOMException NotAllowedError

If the stylesheet is flagged as unmodifiable.

Examples

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
replace
73
79
75
No
60
No
73
73
No
52
No
11.0

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/replace