HTMLElement: свойство style

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Только для чтения style свойство элемента HTMLElement возвращает встроенный стиль элемента в виде живого объекта CSSStyleDeclaration, содержащего список всех свойств стилей для этого элемента со значениями, назначенными только для атрибутов, определенных во встроенном атрибуте элемента style.

Сокращенные свойства расширены. Если вы установите style="border-top: 1px solid black", вместо этого будут установлены свойства в развернутой форме (border-top-color, border-top-style и border-top-width).

Это свойство является только для чтения, то есть невозможно назначить объект CSSStyleDeclaration ему. Тем не менее, можно установить встроенный стиль, назначив строку напрямую свойству style. В этом случае строка передается в CSSStyleDeclaration.cssText. Использование style таким образом полностью перезапишет все встроенные стили элемента.

Поэтому, чтобы добавить определенные стили к элементу, не изменяя других значений стиля, обычно предпочтительнее устанавливать отдельные свойства в объекте CSSStyleDeclaration. Например, можно написать element.style.backgroundColor = "red".

Объявление стиля сбрасывается путем установки его в null или пустую строку, например, elt.style.color = null.

Примечание: Имена свойств CSS преобразуются в идентификаторы JavaScript по этим правилам:

Если свойство состоит из одного слова, оно остается таким же: height остается прежним (в нижнем регистре). Поскольку float является зарезервированным ключевым словом в JavaScript, это имя свойства исторически преобразовывалось в cssFloat. Все современные браузеры сейчас поддерживают непосредственное использование float в JavaScript для доступа к свойству CSS float, но cssFloat используется в старых браузерах и по-прежнему поддерживается как псевдоним в современных браузерах.
Если свойство состоит из нескольких слов, разделенных дефисами, дефисы удаляются, и оно преобразуется в camelCase: background-attachment становится backgroundAttachment.

Свойство style имеет тот же приоритет в каскаде CSS, что и объявление встроенного стиля, заданное через атрибут style.

Значение

Живой объект CSSStyleDeclaration.

Примеры

Получение информации о стиле

Следующий фрагмент кода демонстрирует, как значения, полученные с помощью свойства style элемента, соотносятся со стилем, заданным в атрибуте HTML:

<!doctype html>
<html lang="en-US">
  <body style="font-weight:bold">
    <div style="border-top: 1px solid blue; color:red" id="elt">
      An example div
    </div>
    <pre id="out"></pre>
  </body>
</html>

const element = document.getElementById("elt");
const out = document.getElementById("out");
const elementStyle = element.style;

// We loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
  // We check if the property belongs to the CSSStyleDeclaration instance
  // We also ensure that the property is a numeric index (indicating an inline style)
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop))
  ) {
    out.textContent += `${
      elementStyle[prop]
    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}

Обратите внимание, что font-weight не указан в качестве значения для elementStyle, так как он не определен в атрибуте style самого элемента. Вместо этого он наследуется из определения родительского элемента. Также обратите внимание, что сокращенное свойство border-top, определенное в атрибуте style, не указано напрямую. Вместо этого он заменяется тремя соответствующими свойствами в развернутой форме (border-top-color, border-top-style и border-top-width).

Спецификации

Спецификация
CSS Object Model (CSSOM) # dom-elementcssinlinestyle-style

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`style`	1	12	1	8	3	18	4	10.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style