LearnJS

Inline-стили через свойство style в JavaScript

Свойство style добавляет или изменяет inline-стили - CSS-значения в атрибуте style самого элемента. Оно удобно, когда JavaScript получает или вычисляет одно конкретное значение.

Что меняет style

Inline-стиль действует только для выбранного элемента. После присваивания браузер записывает значение прямо в его атрибут style.

Задание динамического значения

Например, пользователь выбрал цвет, а JavaScript должен показать его в блоке предпросмотра.

<div class="color-preview"></div>
.color-preview {
  width: 120px;
  height: 80px;
  background-color: #e2e8f0;
}
const selectedColor = '#3182ce';
const preview = document.querySelector('.color-preview');

preview.style.backgroundColor = selectedColor;

Постоянный размер блока и начальный цвет остаются в CSS. JavaScript меняет только цвет, который появился во время работы страницы. Такой подход подходит для вычисленного значения, выбранного пользователем или полученного с сервера.

Имена CSS-свойств

В CSS свойства пишут через дефис: background-color и font-size. В JavaScript дефисы заменяют на camelCase: backgroundColor и fontSize.

preview.style.borderRadius = '8px';
preview.style.width = '160px';

Если CSS-значение требует единицу измерения, передавайте её строкой: ‘16px’, ‘2rem’ или ‘50%’. Значения без единиц тоже передают строкой: например, preview.style.opacity = ‘0.7’.

Удаление inline-стиля

Чтобы убрать значение из атрибута style, присвойте свойству пустую строку.

preview.style.backgroundColor = '';

Удалится только это inline-значение. После этого для блока снова применится начальный цвет из CSS-правила .color-preview.

element.style содержит только inline-стили. Если цвет задан CSS-селектором, а не атрибутом style, preview.style.backgroundColor вернёт пустую строку. Inline-значение обычно сильнее обычного CSS-правила, поэтому не задавайте одно свойство одновременно через style и CSS-класс без необходимости.

Когда использовать style

style подходит для одного значения, которое меняется во время работы страницы: выбранного цвета, ширины индикатора, прозрачности или смещения элемента. Для состояния интерфейса и нескольких связанных CSS-правил используйте класс. Постоянное оформление оставляйте в CSS без JavaScript.

Итого

Через element.style можно задать, изменить или удалить inline-стиль конкретного элемента. CSS-свойства пишут в camelCase, а значения с единицами передают строкой. Чтобы вернуть управление обычному CSS, присвойте inline-свойству пустую строку.