CSSStyleSheet: replaceSync() method

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.

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.

Syntax

js
replaceSync(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 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).

Exceptions

NotAllowedError DOMException

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

Examples

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

js
const stylesheet = new CSSStyleSheet();

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

Specifications

Specification
CSS Object Model (CSSOM)
# dom-cssstylesheet-replacesync

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
replaceSync

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also