Свойство style элемента HTML DOM

Определение и использование

style Свойство возвращает значение свойства style элемента в виде объекта CSSStyleDeclaration.

Объект CSSStyleDeclaration содержит все инлайн стили элемента. Он не содержит в <head> Любые стили, установленные в части или любом внешнем стиле таблицы.

Точка 1

Вы не можете установить такой стиль:

element.style = "color:red";

Вы должны использовать такие CSS свойства:

element.style.backgroundColor = "red";

Попробуйте сами

Точка 2

JavaScript и CSS грамматика略有 различаются:

backgroundColor / background-color

См. также наше Полное руководство по Style Object.

Точка 3

Используйте этот стиль свойства, а не Метод setAttribute(), чтобы предотвратить замещение других свойств в свойстве style.

См. также:

Учебник CSS

Референс по CSS

Объект Style

Тег <style> HTML

Пример

Пример 1

Изменить цвет "myH1":

document.getElementById("myH1").style.color = "red";

Попробуйте сами

Пример 2

Получить значение верхнего края "myP":

let value = document.getElementById("myP").style.borderTop;

Попробуйте сами

Грамматика

Возвратить стиль свойства:

element.style.property

Установить стиль свойства:

element.style.property = value

Значение свойства

Значение Описание
value

Указать значение свойства.

Например:

element.style.borderBottom = "2px solid red"

Возвратное значение

Тип Описание
Объект объект CSSStyleDeclaration элемента.

Поддержка браузеров

element.style Это функция DOM Level 2 (2001).

Все браузеры полностью поддерживают его:

Chrome IE Edge Firefox Сafari Опера
Chrome IE Edge Firefox Сafari Опера
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка