Кратко
Свойство HTMLElement.style возвращает объект CSSStyleDeclaration который описывает атрибут стиля элемента. См. CSS Properties Reference для получения списка CSS свойств применимых вместе со style.
Настройка style
Свойство style имеет тот же приоритет (и выше) в каскаде CSS как и прямая декларация стиля через атрибут style, полезен для настройки стиля отдельного специфичного элемента.
Как правило лучше использовать свойство style чем использовать elt.setAttribute('style', '...'), так как использование свойства style не будет перезаписывать другие CSS свойства которые могут быть специфицированы в атрибуте style.
За исключением Opera, стили не могут быть установлены через присвоение строки свойству style (только для чтения) так elt.style = "color: blue;". Это потому что атрибут style возвращает объект CSSStyleDeclaration. Вместо этого, вы можете установить свойства style примерно так:
elt.style.color = "blue"; // Напрямую var st = elt.style; st.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";
}
Спецификация
DOM Level 2 Style: ElementCSSInlineStyle.style
Совместимость
Примечание: Начиная с Gecko 2.0, вы можете установить значения SVG свойств используя такой же укороченный синтаксис:
element.style.fill = 'lime';