English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
styleустановить или вернуть inline-стиль элемента.
он возвращаетCSSStyleDeclarationобъект, который содержит список всех свойств стиля элемента и assigns значения свойствам, определенным в inline-свойствах стиля элемента.
Вернуть свойство стиля:
element.style.property
Установить свойство стиля:
element.style.property = value
document.getElementById("demo").style.color = "blue";Проверьте, посмотрите‹/›注意:Стиль не можно установить,assigning a string to the style property, напримерэлемент.style="color:blue;". Чтобы установить стиль элемента, добавьте к стилю "CSS" свойство и установите значение, как показано:
element.style.backgroundColor="blue"; // Установить цвет фона элемента в голубой
Как вы видите, синтаксис JavaScript для установки CSS-свойств несколько отличается от CSS (backgroundColor вместо background-color).
Для списка всех доступных свойств см.Справочник по стилям.
Свойство style не полезно для полного понимания применяемого к элементу стиля,因为它 представляет собой только inline-свойства стиля, установленные в свойстве style, а не правила CSS, поступающие из других источников (например, правила в этом разделе) или внешние таблицы стилей. Чтобы получить значения всех CSS-свойств элемента, рекомендуется использоватьwindow.getComputedStyle().
Но, можно использовать document.getElementsByTagName() для доступа к элементам <style> в <head>:
var x = document.getElementsByTagName("style")[0]; // Получить первый элемент <style>
注意:Рекомендуется использовать свойство style вместоЭлемент .setAttribute("style", "...")метод, потому что свойство style не будет перекрывать другие CSS-свойства, которые могут быть указаны в свойстве style.
Все браузеры полностью поддерживают свойство style:
| свойство | |||||
| style | является | является | является | является | является |
| значение | описание |
|---|---|
| значение | установить значение свойства. Например, для свойства border: элемент.style.border="5px pure blue"; |
| Возвратное значение: | ОднаCSSStyleDeclarationОбъект, представляющий стиль элемента |
|---|---|
| Версия DOM: | Модель объектов CSS (CSSOM) |
Получите верхний край <p> элемента:
var x = document.getElementById("demo").style.borderTop;Проверьте, посмотрите‹/›ИспользованиеЭлемент Метод .setAttribute() устанавливает стили CSS:
var div = document.querySelector("#myDiv");
div.setAttribute("style", "color:red; border: 1px solid blue;");Проверьте, посмотрите‹/›Учебник CSS:Учебник CSS
Ссылка на CSS:Полный список свойств CSS
HTML-ссылка:Стильные свойства HTML
HTML-ссылка:Тег <style> HTML