CSSStyleSheet: метод insertRule()

Базовая Широко поддерживается

Эта функция хорошо поддерживается и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Метод CSSStyleSheet.insertRule() вставляет новое правило CSS в текущий стилевой лист.

Примечание: Хотя insertRule() — это исключительно метод CSSStyleSheet, он фактически вставляет правило в CSSStyleSheet.cssRules — его внутренний CSSRuleList.

Синтаксис

insertRule(rule)
insertRule(rule, index)

Параметры

rule

Строка, содержащая правило для вставки. Содержание вставляемого правила зависит от его типа:

Для наборов правил, нужен как селектор, так и объявление стиля.
Для правил @, нужен идентификатор @ и содержимое правила.

index Необязательно

Положительное целое число, не большее чем stylesheet.cssRules.length, представляющее позицию вставляемого правила в CSSStyleSheet.cssRules. По умолчанию 0. (В более старых реализациях это значение было обязательным. Подробности см. в Совместимости с браузерами.)

Возвращаемое значение

Индекс вставленного правила в списке правил стилевого листа.

Исключения

IndexSizeError DOMException: Выбрасывается, если index > CSSRuleList.length.
HierarchyRequestError DOMException: Выбрасывается, если rule нельзя вставить в index 0 из-за ограничений CSS.
SyntaxError DOMException: Выбрасывается, если в параметре rule указано более одного правила.
HierarchyRequestError DOMException: Выбрасывается, если вы пытаетесь вставить правило @импорт после правила стиля.
InvalidStateError DOMException: Выбрасывается, если rule является @пространством имён, а в списке правил есть больше, чем только правила @import и/или правила @namespace.

Примеры

Вставка нового правила

Этот фрагмент добавляет новое правило в начало стилевого листа.

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

Функция для добавления правила стилевого листа

/**
 * 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

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`insertRule`	1	12	1	≤12.1	1	18	4	≤12.1	1	1.0	4.4
`index_parameter_optional`	1	12	55	15	1	18	55	14	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule