Как изменить стили элемента?

Изменение стилей элементов с помощью JavaScript позволяет создавать динамичные и отзывчивые интерфейсы, реагирующие на действия пользователя в реальном времени. Существует несколько подходов к управлению внешним видом элементов, каждый из которых подходит для определенного круга задач.

Самый прямой способ изменить отдельное свойство стиля — обратиться к свойству style целевого элемента, например: el.style.color = 'red'. Важно помнить, что имена свойств CSS, состоящие из нескольких слов, в JavaScript пишутся в формате camelCase вместо kebab-case. Так, CSS-свойство background-color превращается в JavaScript в backgroundColor. Этот подход идеален для точечного изменения одного или двух параметров, когда логика инкапсулирована прямо в скрипте.

Если вам нужно применить сразу несколько стилей одновременно, удобнее использовать свойство cssText. Оно позволяет записать целую строку CSS-правил прямо в элемент, например: el.style.cssText = 'color: red; background-color: blue; font-size: 16px;'. Однако стоит учитывать, что присвоение значения через cssText полностью перезаписывает все инлайн-стили, которые были заданы ранее через свойство style.

Иногда возникает необходимость узнать не то, что записано в инлайн-стилях элемента, а его реальные, искомые браузером стили с учетом всех каскадных таблиц стилей и правил наследования. Для этого используется глобальная функция getComputedStyle(el). Она возвращает объект со всеми вычисленными стилями элемента, значения которых можно прочитать, но напрямую изменять через этот объект нельзя.

Отдельного внимания заслуживает работа с CSS custom properties (переменными). Вы можете динамически менять значения CSS-переменных прямо из JavaScript, обращаясь к методу setProperty на объекте style элемента. Например, el.style.setProperty('--main-color', '#ff0000'). Это невероятно мощный подход для реализации тем оформления, когда вся логика внешнего вида вынесена в CSS, а скрипт лишь переключает значения переменных.