пример
Добавьте красный цвет к <h1> элемента:
document.getElementById("myH1").style.color = "red"; Перед установкой стиля:
Hello World!
После задания стиля:
Hello World!
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Свойство стиля возвращает CSSStyleDeclaration объект, который представляет собой атрибут стиля элемента.
Свойство стиля используется для получения или установить определенный стиль элемента, используя различные свойства CSS.
Примечание: Невозможно установить стили, назначив строку свойству стиля, например , элемент .style = "color: red;" , Для того, чтобы задать стиль элемента, добавьте "CSS" свойство стиля и указать значение, например:
element .style.backgroundColor = "red"; // set the background color of an element to red Try it
Как вы можете видеть, синтаксис JavaScript для настройки свойств CSS несколько отличается от CSS (backgroundColor instead of background-color) .
Для получения списка всех доступных свойств см нашего Reference Style Object .
Примечание: Свойство стиля возвращает только объявления CSS , установленные в атрибут стиля встроенного элемента, например ,
<Р стиль = "цвет: красный;">. Это не представляется возможным использовать это свойство , чтобы получить информацию о правилах стиля от <head> раздел в документе или внешние таблицы стилей.
Тем не менее, вы можете получить доступ к <style> элемент из <head> с помощью документа. getElementsByTagName() :
var x = document.getElementsByTagName("STYLE")[0]; // get the first
<style> element Try it
Примечание: Рекомендуется использовать свойство стиля вместо element . setAttribute("style", "...") метод, так как свойство стиля не будет перезаписывать другие свойства CSS , которые могут быть заданы в style атрибута.
Поддержка браузеров
| Имущество | |||||
|---|---|---|---|---|---|
| style | да | да | да | да | да |
Синтаксис
Возвращение свойства стиля:
element .style. property Установка свойств стиля:
element .style. property = value Значения свойств
| Стоимость | Описание |
|---|---|
| value | Задает значение указанного свойства. Например, для свойства borderBottom: Элемент .style.borderBottom = «2рх сплошной красный»; |
Технические подробности
| Возвращаемое значение: | CSSStyleDeclaration объект, представляющий атрибут стиля элемента |
|---|---|
| DOM Version | Дом Уровень 2 CSS |
Еще примеры
пример
Получить значение а <p> верхней границы элемента:
var x = document.getElementById("myP").style.borderTop;В результате х будет:
5px solid red Попробуй сам " Похожие страницы
Учебник CSS: Учебник CSS
CSS Ссылка: Свойства CSS
HTML DOM Ссылка: Стиль Ссылка на объект
HTML Ссылка: HTML <style> тег
<Элемент объекта