Свойство style в JavaScript

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

• Доступ к inline-стилям
• Имена CSS-свойств
• Удаление inline-стиля
• style и CSS-правила
• Итого

Доступ к inline-стилям

<p class="message" style="color: green">Сообщение</p>

const message = document.querySelector('.message');

console.log(message.style.color); // green

message.style.color = '#22543d';

Присваивание изменит значение в атрибуте style у элемента.

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

Обычные CSS-свойства записывают в camelCase. Например, background-color превращается в backgroundColor, а font-size - в fontSize.

message.style.backgroundColor = '#e6fffa';
message.style.fontSize = '16px';

Если значению нужна единица измерения, передавайте её строкой: ‘16px’, ‘2rem’ или ‘50%’.

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

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

message.style.color = '';

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

style и CSS-правила

element.style содержит только inline-стили. Если цвет задан CSS-правилом, например .message { color: green; }, element.style.color вернёт пустую строку. Чтобы узнать итоговое значение, используют getComputedStyle(element).

Итого

element.style позволяет читать, изменять и удалять inline-стили элемента. Имена обычных CSS-свойств пишут в camelCase, а итоговые стили из CSS-правил получают через getComputedStyle(element).