CSS3 Переменные с JavaScript
Изменение переменных с помощью JavaScript
Переменные CSS имеют доступ к DOM, что означает, что вы можете изменить их с помощью JavaScript.
Вот пример того, как вы можете создать скрипт для отображения и изменения переменной --blue из примера, использованного на предыдущих страницах. Не волнуйтесь, если вы не знакомы с JavaScript. Вы можете узнать больше о JavaScript в Учебнике JavaScript:
Пример
<script>
// Получить корневой элемент
var r = document.querySelector(':root');
// Создать функцию для получения значения переменной
function
myFunction_get() {
// Получить стили (свойства и значения) для root
var rs = getComputedStyle(r);
// Внимание значение переменной --blue
alert("Значение переменной--blue: " +
rs.getСвойствоValue('--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 |