CSS använda JavaScript för att ändra variabler

Ändra variabler med JavaScript

CSS-variabler kan åtkomma DOM, vilket innebär att du kan ändra dem med JavaScript.

Detta exempel visar hur man skapar ett skript för att visa och ändra variabeln --blue som användes i föregående sida. Om du inte är bekant med JavaScript, oroa dig inte. Du kan lära dig mer om JavaScript i vår JavaScript-guide:

Exempel

<script>
// Hämta roden
var r = document.querySelector(':root');
// Skapa en funktion för att hämta värden på variabler
function myFunction_get() {
  // Hämta stilar (egenskaper och värden) för roten
  var rs = getComputedStyle(r);
  // Varna värdet av variabeln --blue
  alert("Värdet av --blue är: " + rs.getPropertyValue('--blue'));
}
// Skapa en funktion för att sätta variabelns värde
function myFunction_set() {
  // Sätt värdet för variabeln --blue till ett annat värde (i detta fall "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Prova själv

Webbläsarsupport

Talen i tabellen anger den första webbläsaren som fullständigt stöder egenskapen.

Funktion
var() 49.0 15.0 31.0 9.1 36.0

CSS var() funktion

Funktion Beskrivning
var() Infoga värdet för CSS-variabeln.