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