Свойство стиля HTML DOM
Пример
Добавьте красный цвет к элементу <h1>:
document.getElementById("myH1").style.color = "red";
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство стиля возвращает объект CSSStyleDeclaration, представляющий атрибут стиля элемента.
Свойство стиля используется для получения или установки определенного стиля элемента с использованием различных свойств CSS.
Примечание. Невозможно установить стили, назначив строку свойству стиля, например, element .style = "color: red;". Чтобы установить стиль элемента, добавьте свойство «CSS» к стилю и укажите значение, например:
element.style.backgroundColor = "red"; // set the background color of an element to red
Как видите, синтаксис JavaScript для установки свойств CSS немного отличается от CSS (фоновый цвет вместо фонового цвета).
Список всех доступных свойств см. в нашем Справочнике по объектам стиля .
Примечание. Свойство стиля возвращает только объявления CSS, установленные во встроенном атрибуте стиля элемента, например,
<p style="color: red;">. Это свойство невозможно использовать для получения информации о правилах стиля из раздела <head> документа или внешних таблиц стилей.
Однако вы можете получить доступ к элементу <style> из <head> с помощью document.getElementsByTagName():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Примечание. Рекомендуется использовать свойство стиля вместо метода элемента .setAttribute("style", "...") , поскольку свойство стиля не перезапишет другие свойства CSS, которые могут быть указаны в атрибуте стиля.
Поддержка браузера
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Синтаксис
Свойства возвращаемого стиля:
element.style.property
Задайте свойства стиля:
element.style.property = value
Значения свойств
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Технические детали
| Возвращаемое значение: | Объект CSSStyleDeclaration, представляющий атрибут стиля элемента. |
|---|---|
| DOM-версия | Дом Уровень 2 CSS |
Дополнительные примеры
Пример
Получите значение верхней границы элемента <p>:
var x = document.getElementById("myP").style.borderTop;
Связанные страницы
Учебник по CSS : Учебник по CSS
Справочник по CSS: свойства CSS
Справочник по HTML DOM: Справочник по объектам стиля
Справочник по HTML: HTML-тег <style>
❮ Объект элемента