У вас включен AdBlock или иной блокировщик рекламы.

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

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

Как получить и установить значения переменных 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');

Вы сразу увидите новое значение, применяемое везде, где используется переменная.

#JavaScript
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоеденяйся в тусовку

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

Попробовать