HTMLElement.style
Кратко
Свойство HTMLElement.style
используется для получения и установки инлайновых стилей. При получении возвращается объект CSSStyleDeclaration
, который содержит список из всех свойств стилей для этого элемента с значениями заданными для атрибутов , что определённы в инлайновом стиле (см. атрибут
стиля) элемента. См. CSS Properties Reference для получения списка CSS свойств применимых вместе со style.
Настройка стилей
Свойство style имеет тот же приоритет (и выше) в каскаде CSS как и прямая декларация стиля через атрибут style, полезен для настройки стиля отдельного специфичного элемента.
Стили не следует устанавливать непосредственно через свойство style
(например elt.style = "color: blue;"
), поскольку оно считается доступным только для чтения и атрибут style возвращает объект CSSStyleDeclaration
который доступен только для чтения. Вместо этого стили могут быть установлены путём присвоения значений свойствам style
. Для добавления определённых стилей для элемента без изменения других свойств стилей предпочтительно использовать отдельные свойства style
(например elt.style.color = '...'
).
При использовании elt.style.cssText = '...'
или elt.setAttribute('style','...')
устанавливаются стили перезаписывая уже существующие. Обратите внимание, что имена свойств стилей задаются в camel-case а не в kebab-case elt.style.<property>
(т.е., elt.style.fontSize
, а не elt.style.font-size
).
Объявленные стили сбрасываются присваиванием значения null, elt.style.color = null
Примеры
// Устанавливает несколько стилей в одном выражении
elt.style.cssText = "color: blue; border: 1px solid black";
// Или
elt.setAttribute("style", "color:red; border: 1px solid blue;");
// Устанавливает определённый стиль оставляя другие значения стиля нетронутыми
elt.style.color = "blue";
Получение стиль-информации
Свойство style
в основном не имеет пользы в части информации о стиле элемента, оно только олицетворяет собой набор CSS деклараций атрибутов style элемента, а не тех которые проистекают из стиль-правил откуда-либо ещё, таких как стилевые правила раздела <head>
, или внешней таблицы стилей. Для получения значений всех CSS свойств элемента вы должны использовать вместо этого window.getComputedStyle()
.
Следующий код показывает имена всех свойств стиля, значений, заданных явно для элемента elt и унаследованных "рассчитанных" значений:
var elt = document.getElementById("elementIdHere");
var out = "";
var st = elt.style;
var cs = window.getComputedStyle(elt, null);
for (x in st) {
out += " " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
}
Спецификация
Совместимость
BCD tables only load in the browser