CSSStyleSheet：insertRule() 方法

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

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

语法

js
insertRule(rule)
insertRule(rule, index)

参数

rule

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

index 可选

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

返回值

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

异常

IndexSizeError DOMException

如果 index > CSSRuleList.length，则抛出此异常。

HierarchyRequestError DOMException

如果由于某些 CSS 约束，无法在 index 0 处插入 rule，则抛出此异常。

SyntaxError DOMException

如果在 rule 参数中给出了多个规则，则抛出此异常。

HierarchyRequestError DOMException

如果尝试在样式规则之后插入 @import at-规则，则抛出此异常。

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 i = 0; i < rules.length; i++) {
    let j = 1,
      rule = rules[i],
      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];
      j = 0;
    }

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

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

规范

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

浏览器兼容性

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

另请参阅