1. Web
  2. Web API
  3. CSSStyleSheet
  4. insertRule()

CSSStyleSheet: insertRule() 方法

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

CSSStyleSheet.insertRule() 方法将一个新的 CSS 规则 插入到 当前样式表 中。

注意： 尽管 insertRule() 仅是 CSSStyleSheet 的一个方法，但它实际上是将规则插入到 CSSStyleSheet.cssRules 中——也就是它的内部 CSSRuleList。

语法

js
insertRule(rule)
insertRule(rule, index)

参数

rule

包含要插入规则的字符串。要插入的规则必须包含什么取决于其类型

  • 对于 规则集，需要同时包含一个 选择器 和一个样式声明。
  • 对于 at-规则，需要同时包含一个 at-标识符和规则内容。
index 可选

一个小于或等于 stylesheet.cssRules.length 的正整数，表示新插入规则在 CSSStyleSheet.cssRules 中的位置。默认为 0。（在旧的实现中，这是必需的。有关详细信息，请参阅 浏览器兼容性。）

返回值

新插入规则在样式表规则列表中的索引。

异常

IndexSizeError DOMException

如果 index > CSSRuleList.length，则抛出此错误。

HierarchyRequestError DOMException

如果由于某些 CSS 约束（例如：尝试在样式规则之后插入 @import at-规则）而无法在指定索引处插入 rule，则抛出此错误。

SyntaxError DOMException

如果 rule 参数中给出了多个规则，则抛出此错误。

InvalidStateError DOMException

如果 rule 是 @namespace 并且规则列表仅包含 @import at-规则和/或 @namespace at-规则，则抛出此错误。

示例

插入新规则

此代码片段将一个新规则推送到我的样式表的顶部。

js
myStyle.insertRule("#blanc { color: white }", 0);

添加样式表规则的函数

js
/**
 * Add a stylesheet rule to the document (it may be better practice
 * to dynamically change classes, so style information can be kept in
 * genuine stylesheets and avoid adding extra elements to the DOM).
 * Note that an array is needed for declarations and rules since ECMAScript does
 * not guarantee a predictable object iteration order, and since CSS is
 * order-dependent.
 * @param {Array} rules Accepts an array of JSON-encoded declarations
 * @example
addStylesheetRules([
  ['h2', // Also accepts a second argument as an array of arrays instead
    ['color', 'red'],
    ['background-color', 'green', true] // 'true' for !important rules
  ],
  ['.myClass',
    ['background-color', 'yellow']
  ]
]);
*/
function addStylesheetRules(rules) {
  const styleEl = document.createElement("style");

  // Append <style> element to <head>
  document.head.appendChild(styleEl);

  // Grab style element's sheet
  const styleSheet = styleEl.sheet;

  for (let rule of rules) {
    let i = 1,
      selector = rule[0],
      propStr = "";
    // If the second argument of a rule is an array of arrays, correct our variables.
    if (Array.isArray(rule[1][0])) {
      rule = rule[1];
      i = 0;
    }

    for (; i < rule.length; i++) {
      const prop = rule[i];
      propStr += `${prop[0]}: ${prop[1]}${prop[2] ? " !important" : ""};\n`;
    }

    // Insert CSS Rule
    styleSheet.insertRule(
      `${selector}{${propStr}}`,
      styleSheet.cssRules.length,
    );
  }
}

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后一次修改时间为 ，作者为 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的页面的问题
© . Content available under a Creative Commons license.