CSS zmiana zmiennych za pomocą JavaScript

Zmiana zmiennych za pomocą JavaScript

Zmienne CSS mogą uzyskać dostęp do DOM, co oznacza, że możesz zmieniać je za pomocą JavaScript.

Ten przykład pokazuje, jak utworzyć skrypt do wyświetlania i zmiany zmiennej --blue użytej w poprzednim przykładzie. W tym momencie, jeśli nie znasz JavaScript, nie martw się. Możesz nauczyć się więcej o JavaScript w naszym kursie JavaScript:

Przykład

<script>
// Pobierz element korzenia
var r = document.querySelector(':root');
// Utwórz funkcję uzyskującą wartość zmiennej
function myFunction_get() {
  // Pobierz style (właściwości i wartości) dla korzenia
  var rs = getComputedStyle(r);
  // Powiadomienie o wartości zmiennej --blue
  alert("Wartość --blue wynosi: " + rs.getPropertyValue('--blue'));
}
// Utwórz funkcję ustawiającą wartość zmiennej
function myFunction_set() {
  // Ustaw wartość zmiennej --blue na inną wartość (w tym przypadku "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Spróbuj sam

Obsługa przeglądarek

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Funkcja
var() 49.0 15.0 31.0 9.1 36.0

Funkcja CSS var()

Funkcja Opis
var() Wprowadź wartość zmiennej CSS.