CSSStyleSheet: replace() 方法

基线 2023

新推出

自 2023 年 3 月起，此功能在所有最新的设备和浏览器版本上均可使用。此功能可能在较旧的设备或浏览器中无法使用。

replace() 方法是 CSSStyleSheet 接口的方法，用于异步地将样式表的内容替换为传递给它的内容。该方法返回一个 promise，该 promise 解析为 CSSStyleSheet 对象。

replace() 和 CSSStyleSheet.replaceSync() 方法只能用于使用 CSSStyleSheet() 构造函数创建的样式表。

语法

js
replace(text)

参数

text

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

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

返回值

解析为 CSSStyleSheet 的 Promise。

异常

NotAllowedError DOMException

如果满足以下两个条件之一，则抛出此异常

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

示例

在以下示例中，将创建一个新的样式表，并使用 replace() 添加两个 CSS 规则。然后将第一个规则打印到控制台，它将返回：body { font-size: 1.4em; }

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

规范

规范
CSS 对象模型 (CSSOM)
# dom-cssstylesheet-replace

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅