CSS brug af JavaScript til at ændre variabler

Brug JavaScript til at ændre variabler

CSS-variabler kan tilgå DOM, hvilket betyder, at du kan ændre dem ved hjælp af JavaScript.

Dette eksempel viser, hvordan du kan oprette et script til at vise og ændre --blue-variablen fra det tidligere eksempel. Hvis du ikke er bekendt med JavaScript, skal du ikke bekymre dig. Du kan lære mere om JavaScript i vores JavaScript-tur:

Eksempel

<script>
// Få rod-elementet
var r = document.querySelector(':root');
// Opret en funktion til at hente variabelværdier
function myFunction_get() {
  // Få stilarterne (egenskaber og værdier) for rod
  var rs = getComputedStyle(r);
  // Advar om værdien af variablen --blue
  alert("Værdien af --blue er: " + rs.getPropertyValue('--blue'));
}
// Opret en funktion til at sætte værdien af variablen
function myFunction_set() {
  // Angiv værdien af variablen --blue til en anden værdi (i dette tilfælde "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Prøv det selv

Browser understøttelse

Tal i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Funktion
var() 49.0 15.0 31.0 9.1 36.0

CSS var() funktion

Funktion Beskrivelse
var() Indsæt værdien for CSS variablen.