CSSStyleDeclaration
Базовая Широко доступна *
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с сентября 2015 года.
* Некоторые части этой функции могут иметь различный уровень поддержки.
Интерфейс CSSStyleDeclaration представляет собой объект, являющийся блоком объявления CSS, и предоставляет информацию о стиле, а также различные методы и свойства, связанные со стилем.
Объект CSSStyleDeclaration может быть доступен с помощью трёх различных API:
- Через
HTMLElement.style, который обрабатывает встроенные стили отдельного элемента (например,<div style="…">). - Через API
CSSStyleSheet. Например,document.styleSheets[0].cssRules[0].styleвозвращает объектCSSStyleDeclarationдля первой CSS-правила в первом стилевом листе документа. - Через
Window.getComputedStyle(), который предоставляет объектCSSStyleDeclarationкак только для чтения интерфейс.
Атрибуты
CSSStyleDeclaration.cssText-
Текстовое представление блока объявления, только если он доступен через
HTMLElement.style. Установка этого атрибута изменяет встроенный стиль. Если вам нужно текстовое представление вычисленного блока объявления, вы можете получить его с помощьюJSON.stringify(). -
CSSStyleDeclaration.lengthТолько для чтения -
Количество свойств. Смотрите метод
item()ниже. -
CSSStyleDeclaration.parentRuleТолько для чтения -
Содержащее
CSSRule.
Свойства CSS
CSSStyleDeclaration.cssFloat-
Специальный псевдоним для свойства CSS
float. CSSStyleDeclarationименованных свойств-
Атрибуты с дефисами и верблюжьим регистром для всех поддерживаемых свойств CSS.
Методы экземпляра
CSSStyleDeclaration.getPropertyPriority()-
Возвращает необязательный приоритет «important».
CSSStyleDeclaration.getPropertyValue()-
Возвращает значение свойства, заданного по имени свойства.
CSSStyleDeclaration.item()-
Возвращает имя свойства CSS по его индексу или пустую строку, если индекс вне границ.
CSSStyleDeclaration.removeProperty()-
Удаляет свойство из блока объявления CSS.
CSSStyleDeclaration.setProperty()-
Изменяет существующее свойство CSS или создаёт новое свойство CSS в блоке объявления.
-
CSSStyleDeclaration.getPropertyCSSValue()Устаревший -
Поддерживается только через getComputedStyle в Firefox. Возвращает значение свойства как
CSSPrimitiveValueилиnullдля сокращённых свойств.
Пример
const styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);
for (let i = styleObj.length; i--; ) {
const nameString = styleObj[i];
styleObj.removeProperty(nameString);
}
console.log(styleObj.cssText);
Спецификации
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | |
@@iterator |
51 | 18 | 36 | 38 | 11 | 51 | 36 | 41 | 11 | 5.0 | 51 |
CSSStyleDeclaration |
1 | 12 | 1 | ≤12.1 | 1 | 18 | 4 | ≤12.1 | 1 | 1.0 | 4.4 |
cssFloat |
1 | 12 | 1–17 | ≤12.1 | 1 | 18 | 4–17 | ≤12.1 | 1 | 1.0 | 4.4 |
cssText |
1 | 12 | 1 | ≤12.1 | 1 | 18 | 4 | ≤12.1 | 1 | 1.0 | 4.4 |
getPropertyCSSValue |
1–40 | Нет | 1–61Возвращает результат только если вызван на результатеgetComputedStyle(). |
15–27 | 1 | 18–40 | 4–61 | 14–27 | 1 | 1.0–4.0 | 4.4–41 |
getPropertyPriority |
1 | 12 | 1 | ≤12.1 | 1 | 18 | 4 | ≤12.1 | 1 | 1.0 | 4.4 |
getPropertyValue |
1 | 12 | 1 | ≤12.1 | 1 | 18 | 4 | ≤12.1 | 1 | 1.0 | 4.4 |
item |
1 | 12 | 1 | ≤12.1 | 6 | 18 | 4 | ≤12.1 | 6 | 1.0 | 4.4 |
length |
1 | 12 | 1 | ≤12.1 | 6 | 18 | 4 | ≤12.1 | 6 | 1.0 | 4.4 |
parentRule |
1 | 12 | 1 | 15 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
removeProperty |
1 | 12 | 1 | ≤12.1 | 1 | 18 | 4 | ≤12.1 | 1 | 1.0 | 4.4 |
setProperty |
1 | 12 | 1 | 9 | 6 | 18 | 4 | 10.1 | 6 | 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/CSSStyleDeclaration
