CSSStyleSheet: replace() 方法

语法

replace(text)

参数

文本

包含用于替换样式表内容的样式规则的字符串。如果字符串不包含可解析的规则列表，则其值将被设置为空字符串。

注意： 如果 text 中传入的任何规则是使用 @import 规则导入的外部样式表，这些规则将被移除，并在控制台中打印一条警告。

返回值

一个 Promise，它会解析为 CSSStyleSheet 对象。

异常

NotAllowedError DOMException

在满足以下两种条件之一时抛出

• 样式表不是使用 CSSStyleSheet() 构造函数创建的。
• 样式表被标记为不可修改。

示例

在下面的示例中，创建了一个新的样式表，并使用 replace() 添加了两条 CSS 规则。然后，第一条规则被打印到控制台，输出结果为：body { font-size: 1.4em; }

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

规范

浏览器兼容性

另见

• 可构造样式表 (web.dev)
• 使用 Shadow DOM