Изменение свойств CSS с помощью JavaScript

Изменение переменной с помощью JavaScript

Переменные CSS могут обращаться к DOM, что означает, что вы можете изменить их с помощью JavaScript.

Этот пример объясняет, как создать скрипт для отображения и изменения переменной --blue, используемой в примере на предыдущей странице. В этом случае, если вы не знакомы с JavaScript, не волнуйтесь. Вы можете узнать больше о JavaScript в нашем уроке JavaScript:

Пример

<script>
// Получение корневого элемента
var r = document.querySelector(':root');
// Создание функции для получения значения переменной
function myFunction_get() {
  // Получить стили (свойства и значения) для корня
  var rs = getComputedStyle(r);
  // Предупреждение значения переменной --blue
  alert("Значение --blue: " + rs.getPropertyValue('--blue'));
}
// Создать функцию для установки значения переменной
function myFunction_set() {
  // Установить значение переменной --blue в другое значение (в данном случае "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Попробуйте это самостоятельно

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая поддерживает этот атрибут полностью.

Функция
var() 49.0 15.0 31.0 9.1 36.0

Функция var() CSS

Функция Описание
var() Вставьте значение переменной CSS.