Как изменить стили элемента с помощью свойства Element.style в JavaScript

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

Свойство Element.style в JavaScript

Как правило, оно используется только для чтения. Оно возвращает объект CSSStyleDeclaration — массив CSS-стилей элемента, а также пары (key: value) всех его стилей. Все они доступны для чтения и изменения.

<p class="element" style="background-color: yellow; color: blue;"> Hello, world!</p>

// Получаем объект CSSStyleDeclaration 
let el = document.querySelector('.element');

// Выводим в консоль объект CSSStyleDeclaration 
let elStyles = el.style;
console.log(elStyles);

Но задавать стили напрямую с помощью этого свойства — плохая практика.

elStyles.style = 'color: red; font-size: 3rem;';

Установить напрямую отдельные стили можно, используя CamelCase.

elStyles.fontSize = '3rem'; 
elStyles.color = 'red';

Несмотря на то, что большинство современных браузеров позволяют это делать, такой подход тоже не рекомендуется.

Читайте также: Как получить последний элемент массива JavaScript с нужным значением.

Как правильно использовать Element.style в JavaScript

В таком случае как изменить Element.style? Лучшим вариантом является использование свойства Element.style.cssText, которое работает как Element.className, но для инлайновых стилей. Его можно применять в качестве геттера или сеттера.

В первом случае он позволяет получить все инлайновые стили элемента в формате строки. Во втором — заменит все текущие стили элемента на указанные в Element.style.cssText. Они также задаются в строковом формате.

// Получаем инлайновые стили элемента (если таковые имеются) 
let elStyles = el.style.cssText; 

// Удаляем существующие стили и заменяем их на новые 
elStyles.cssText = 'color: red; font-size: 3rem;';

Если задача состоит не в полной замене стилей, а добавлении дополнительных или замене одного конкретного стиля, то и это cssText позволяет легко реализовать через свойство Element.style и JavaScript.

// Добавляем новый инлайновый стиль к существующим 
elStyles.cssText += 'color: green;';

При наличии у элемента стилей, прописанных в CSS обычным способом, инлайновые, конечно, их «затрут».

Такой способ отлично подойдет для динамичного управления стилями элемента, например, при определенных действиях пользователя. Это позволит придать интерфейсу динамики.

Кроссбраузерность

Element.style имеет полную поддержку, в том числе в старых версиях браузеров.