CSS Изменение переменных с помощью JavaScript
Изменить переменные с помощью JavaScript
Переменные CSS имеют доступ к DOM, что означает, что вы можете изменять их с помощью JavaScript.
Вот пример того, как вы можете создать скрипт для отображения и изменения переменной --blue из примера, использованного на предыдущих страницах. Пока не беспокойтесь, если вы не знакомы с JavaScript. Вы можете узнать больше о JavaScript в JavaScript Учебнике на нашем сайте W3Schools на русском:
Пример
<script>
// Получить корневой элемент
var r = document.querySelector(':root');
// Создать функцию для получения значения переменной
function myFunction_get() {
// Получить стили (свойства и значения) для root
var rs = getComputedStyle(r);
// Оповещение значения переменной --blue
alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}
// Создать функцию для установки значения переменной
function myFunction_set() {
// Установите значение переменной --blue на другое значение (в данном случае "lightblue")
r.style.setProperty('--blue', 'lightblue');
}
</script>
Попробуйте сами »
Поддержка браузерами
Числа в таблице указывают первую версию браузера, которая полностью поддерживает функцию var().
| Функция | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS Функция var()
| Свойство | Описание |
|---|---|
| var() | Вставляет значение CSS переменной |
