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().

var div = document.getElementById("div1");
div.style.marginTop = ".25in";

Следующий код показывает имена всех свойств стиля, значений, заданных явно для элемента 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";
}

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

DOM Level 2 Style: ElementCSSInlineStyle.style

CSSOM: ElementCSSInlineStyle

Совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
styleChrome Полная поддержка 45Edge Полная поддержка 12Firefox Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Returns CSS2Properties, rather than CSSStyleDeclaration.
IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка 11WebView Android Полная поддержка 45Chrome Android Полная поддержка 45Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.

См. также