CSSRuleList

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

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

A CSSRuleList представляет собой упорядоченную коллекцию только для чтения CSSRule объектов.

Хотя объект CSSRuleList является только для чтения и не может быть изменен напрямую, он считается объектом live, так как содержимое может меняться со временем.

Для редактирования базовых правил, возвращаемых объектами CSSRule, используйте CSSStyleSheet.insertRule() и CSSStyleSheet.deleteRule(), которые являются методами CSSStyleSheet.

Этот интерфейс был попыткой создать неизменяемый список и продолжает поддерживаться только для того, чтобы не сломать код, который его уже использует. Современные API представляют структуры списков с использованием типов, основанных на JavaScript массивах, что делает доступными многие методы массивов, а также налагает дополнительные семантические ограничения на их использование (например, делает элементы только для чтения).

Эти исторические причины не означают, что вам, как разработчику, следует избегать CSSRuleList. Вы сами не создаёте объекты CSSRuleList, но получаете их из API, таких как CSSStyleSheet.cssRules и CSSKeyframesRule.cssRules, и эти API не устарели. Однако будьте внимательны к семантическим различиям от реального массива.

Свойства экземпляра

CSSRuleList.length Только для чтения: Возвращает целое число, представляющее количество CSSRule объектов в коллекции.

Методы экземпляра

CSSRuleList.item(): Получает один CSSRule.

Примеры

В приведенном ниже примере есть стилевое описание с тремя правилами. Использование CSSStyleSheet.cssRules возвращает CSSRuleList, которое выводится в консоль.

Количество правил в списке выводится в консоль с помощью CSSRuleList.length. Первое CSSRule можно вернуть, используя 0 в качестве параметра для CSSRuleList.item, в примере это вернёт правила для селектора body.

CSS

body {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  margin: 2em;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}

.container > * {
  background-color: #3740ff;
  color: #fff;
}

JavaScript

let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
console.log(myRules.length);
console.log(myRules[0]);

Спецификации

Спецификация
CSS Object Model (CSSOM) # the-cssrulelist-interface

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

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

См. также

CSSRule

© 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/CSSRuleList