Возьмите под контроль свои стили: руководство по обновлению переменных CSS с помощью JavaScript

Переменные CSS, также известные как настраиваемые свойства, представляют собой определяемые пользователем значения, которые можно повторно использовать в таблицах стилей CSS. Они объявляются с использованием префикса --, и им могут быть присвоены такие значения, как цвета, размеры или любое другое допустимое значение CSS. Вот пример:

:root {
  --primary-color: #3498db;
}

.element {
  color: var(--primary-color);
}

В приведенном выше фрагменте кода мы объявляем переменную CSS --primary-color и присваиваем ей значение #3498db. Позже мы используем эту переменную в свойстве color класса .element. Это позволяет нам легко изменить основной цвет во всем нашем приложении, изменив всего одну строку кода.

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

Доступ к переменным CSS с помощью JavaScript

Для начала нам нужно понять, как получить доступ к переменным CSS и управлять ими с помощью JavaScript. Мы можем получить доступ к переменным CSS, используя функцию getComputedStyle, которая возвращает вычисленный стиль элемента. Вот пример:

const element = document.querySelector('.element');
const styles = getComputedStyle(element);
const primaryColor = styles.getPropertyValue('--primary-color');
console.log(primaryColor);

В приведенном выше коде мы сначала выбираем элемент с классом .element. Затем мы используем getComputedStyle для получения вычисленных стилей этого элемента. Наконец, мы используем метод getPropertyValue для доступа к значению переменной --primary-color. Теперь это значение можно использовать в нашем коде JavaScript.

Изменение переменных CSS с помощью JavaScript

Получив доступ к переменной CSS, мы можем динамически изменять ее значение с помощью JavaScript. Для этого мы используем метод setProperty, который позволяет нам изменить значение свойства CSS. Вот пример:

const element = document.querySelector('.element');
element.style.setProperty('--primary-color', '#ff0000');

В приведенном выше коде мы выбираем элемент с классом .element и используем метод setProperty, чтобы изменить значение переменной --primary-color на #ff0000, которое представляет красный цвет. В результате цвет элемента будет соответствующим образом обновлен.

Реагирование на действия пользователей

Один из самых мощных вариантов использования для обновления переменных CSS с помощью JavaScript — это реагирование на взаимодействие с пользователем. Например, вы можете изменить цвет фона кнопки при нажатии. Давайте посмотрим, как мы можем этого добиться:

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

button.addEventListener('click', () => {
  button.style.setProperty('--background-color', '#ff0000');
});

В приведенном выше коде мы выбираем элемент кнопки и добавляем прослушиватель событий для события click. Когда кнопка нажата, мы используем метод setProperty для обновления значения переменной --background-color до #ff0000. В результате цвет фона кнопки изменится на красный.

Динамические обновления на основе пользовательского ввода

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

<input type="range" id="slider">
<p id="text">Hello, world!</p>

const slider = document.getElementById('slider');
const text = document.getElementById('text');

slider.addEventListener('input', () => {
  const fontSize = slider.value + 'px';
  text.style.setProperty('--font-size', fontSize);
});

Во фрагменте кода HTML у нас есть элемент диапазона ввода с идентификатором «слайдер» и элемент абзаца с идентификатором «текст». В коде JavaScript мы выбираем оба элемента и добавляем прослушиватель событий для события «input» на ползунке.

При изменении значения ползунка мы обновляем размер шрифта текстового элемента, изменяя значение переменной «— font-size» с помощью метода setProperty. Размер шрифта рассчитывается на основе значения ползунка и объединяется с «px» для представления пикселей.

Когда пользователь взаимодействует с ползунком, размер шрифта текстового элемента будет динамически изменяться, обеспечивая обратную связь в реальном времени на основе ввода пользователя.

Глобальное обновление переменных CSS

До сих пор мы видели примеры обновления переменных CSS для определенных элементов. Однако могут быть случаи, когда вы хотите обновить переменную CSS глобально, затрагивая несколько элементов или даже весь документ. Для этого мы можем изменить значение переменной CSS в псевдоклассе :root.

Вот пример:

document.documentElement.style.setProperty('--primary-color', '#00ff00');

В приведенном выше коде мы используем document.documentElement для выбора корневого элемента документа, которым обычно является элемент <html>. Установив setProperty для этого элемента, мы можем глобально обновить значение переменной --primary-color.

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

Заключение

В этой статье мы рассмотрели, как использовать JavaScript для обновления переменных CSS. Мы начали с понимания основ переменных CSS и синтаксиса их объявления. Затем мы узнали, как получать доступ к переменным CSS и изменять их с помощью JavaScript.

Спасибо за прочтение. Если вам понравилась эта статья, поддержите меня, став участником Medium.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .