Свойство style
Пример
Добавить красный цвет к элементу <h1>:
document.getElementById("myH1").style.color = "red";
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Свойство style возвращает объект CSSStyleDeclaration, который представляет атрибут стиля элемента.
Свойство style используется для получения или установки определенного стиля элемента с использованием различных свойств CSS.
Примечание: Невозможно задать стили, присвоив строку свойству style, например, элементу.style = "color: red;". Чтобы задать стиль элемента, добавьте свойство "CSS" к стилю и укажите значение, например:
element.style.backgroundColor = "red"; // установите цвет фона элемента на красныйПопробовать
Как вы можете видеть, JavaScript синтаксис для настройки свойств CSS немного отличается от CSS (backgroundColor от background-color).
Список всех доступных объектов смотрите в нашем Справочник Объект Style.
Примечание: Свойство style возвращает только объявления CSS, установленные в атрибуте встроенного элемента стиля, например
<p style="color: red;">. Невозможно использовать это свойство для получения информации о правилах стиля из раздела "head" в документе или внешние таблицы стилей.
Однако вы можете получить доступ к элементу <style> из <head> с помощью document.getElementsByTagName():
var x = document.getElementsByTagName("STYLE")[0]; // получите первый элемент <style> Попробовать
Примечание: Рекомендуется использовать свойство "style" метод element.setAttribute("style", "..."), потому что свойство style не будет перезаписывать другие свойства CSS это может быть указано в атрибуте стиля.
Поддержка браузера
Свойство | |||||
---|---|---|---|---|---|
style | Да | Да | Да | Да | Да |
Синтаксис
Возвращает свойства стиля:
element.style.property
Устанавливает свойства стиля:
element.style.property = value
Свойство значений
Значение | Описание |
---|---|
value | Задает значение указанного свойства. Например, для свойства borderBottom: element.style.borderBottom = "2px solid red"; |
Технические детали
Вернёт значение | Объект CSSStyleDeclaration, представляющий атрибут стиля элемента |
---|---|
DOM Версия | DOM Уровень 2 CSS |
Ещё примеры
Пример
Получить значение верхней границы элемента <p>:
var x = document.getElementById("myP").style.borderTop;
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Учебник
CSS Справочник: CSS Свойства
HTML DOM Справочник: Style Object Reference
HTML Справочник: HTML <style> tag
❮ Объект элемента