/Web APIs

CSSStyleSheet: replaceSync() method

The replaceSync() method of the CSSStyleSheet interface synchronously replaces the content of the stylesheet with the content passed into it.

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





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

None (undefined).


NotAllowedError DOMException

Thrown if the stylesheet was not created using the CSSStyleSheet() constructor or if the stylesheet is flagged as unmodifiable.


In the following example a new stylesheet is created and two CSS rules are added using replaceSync.

const stylesheet = new CSSStyleSheet();

stylesheet.replaceSync("body { font-size: 1.4em; } p { color: red; }");


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
replaceSync 73 79 101 No 60 16.4 73 73 101 52 16.4 11.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.