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
Specification |
---|
CSS Object Model (CSSOM) # dom-cssstylesheet-replace |
Browser compatibility
BCD tables only load in the browser