Как получить и установить значения переменных CSS с помощью JavaScript
Переменные CSS являются очень приятным дополнением к языку, несмотря на то, что они невероятно просты. Конечно, мы могли бы использовать SASS или стилус, но языки никогда не должны рассчитывать на разработчиков, полагающихся на фреймворки и инструментальные средства, чтобы выполнить то, что нам нужно. И точно так же, как и любая другая часть веб-страницы, вы можете получать и изменять значения переменных CSS - давайте посмотрим, как это сделать!
Установка и использование CSS переменных
Традиционный метод использования собственных переменных CSS добавляет его в root:
:root {
--my-variable-name: #999999;
}
Получение значения переменной CSS
Чтобы получить значение переменной CSS в окне, мы будем использовать методы getComputedStyle и getPropertyValue:
getComputedStyle(document.documentElement)
.getPropertyValue('--my-variable-name'); // #999999
Значение вычисленной переменной возвращается в виде строки.
Установка значения переменной CSS
Чтобы установить значение переменной CSS с использованием JavaScript, мы будем использывать свойство setProperty для стиля documentElement:
document.documentElement.style
.setProperty('--my-variable-name', 'pink');
Вы сразу увидите новое значение, применяемое везде, где используется переменная.
