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 змінної |
