Zmienne zmiany CSS za pomocą JavaScript
Zmień zmienne za pomocą JavaScript
Zmienne CSS mają dostęp do DOM, co oznacza, że możesz je zmieniać za pomocą JavaScript.
Oto przykład tworzenia skryptu wyświetlającego i zmieniającego zmienną --blue z przykładu użytego na poprzednich stronach. Na razie nie martw się, jeśli nie znasz języka JavaScript. Możesz dowiedzieć się więcej o JavaScript w naszym samouczku JavaScript :
Przykład
<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>
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę
var()funkcję.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Funkcja
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |