Изменение переменных CSS с помощью JavaScript
Изменить переменные с помощью JavaScript
Переменные CSS имеют доступ к DOM, а это значит, что вы можете изменить их с помощью JavaScript.
Вот пример того, как вы можете создать скрипт для отображения и изменения переменной --blue из примера, использованного на предыдущих страницах. Пока не беспокойтесь, если вы не знакомы с JavaScript. Вы можете узнать больше о JavaScript в нашем учебном пособии по JavaScript :
Пример
<script>
// Get the root element
var r = document.querySelector(':root');
// Create a function for getting a variable value
function
myFunction_get() {
// Get the styles (properties and values) for the
root
var rs = getComputedStyle(r);
// Alert the value of
the --blue variable
alert("The value of --blue is: " +
rs.getPropertyValue('--blue'));
}
// Create a function for setting a
variable value
function myFunction_set() {
// Set the value of
variable --blue to another value (in this case "lightblue")
r.style.setProperty('--blue', 'lightblue');
}
</script>
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает эту
var()
функцию.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS-функция var()
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |