CSS variabelen wijzigen met JavaScript

Variabelen wijzigen met JavaScript

CSS variabelen kunnen toegang krijgen tot het DOM, wat betekent dat je ze kunt wijzigen met JavaScript.

Dit voorbeeld toont hoe je een script kunt maken om de --blue variabele te tonen en te wijzigen die in het voorbeeld op de vorige pagina wordt gebruikt. Als je niet bekend bent met JavaScript, hoef je je geen zorgen te maken. Je kunt meer over JavaScript leren in onze JavaScript-tutorial:

Voorbeeld

<script>
// Haal het root-element op
var r = document.querySelector(':root');
// Maak een functie om de waarde van de variabele te verkrijgen
function myFunction_get() {
  // Haal de stijlen (eigenschappen en waarden) voor de root op
  var rs = getComputedStyle(r);
  // Waarschuw de waarde van de --blue variabele
  alert("De waarde van --blue is: " + rs.getPropertyValue('--blue'));
}
// Create a function to set the value of the variable
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Probeer het zelf uit

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Functie
var() 49.0 15.0 31.0 9.1 36.0

CSS var() functie

Functie Beschrijving
var() Voeg de waarde van de CSS variabele in.