Variabili CSS utilizzando JavaScript

Modifica le variabili con JavaScript

Le variabili CSS possono accedere al DOM, il che significa che puoi modificarle tramite JavaScript.

Questo esempio spiega come creare uno script per visualizzare e modificare la variabile --blue utilizzata nell'esempio della pagina precedente. In questo momento, se non sei familiare con JavaScript, non preoccuparti. Puoi imparare di più su JavaScript nel nostro tutorial JavaScript:

Esempio

<script>
// Ottieni l'elemento radice
var r = document.querySelector(':root');
// Crea la funzione per ottenere il valore della variabile
function myFunction_get() {
  // Ottieni gli stili (proprietà e valori) per l'elemento radice
  var rs = getComputedStyle(r);
  // Avvisa il valore della variabile --blue
  alert("Il valore di --blue è: " + rs.getPropertyValue('--blue'));
}
// Crea una funzione per impostare il valore della variabile
function myFunction_set() {
  // Imposta il valore della variabile --blue a un altro valore (in questo caso "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Prova tu stesso

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Funzione
var() 49.0 15.0 31.0 9.1 36.0

Funzione var() CSS

Funzione Descrizione
var() Inserisci il valore della variabile CSS.