Modification des variables CSS avec JavaScript

Modifier les variables avec JavaScript

Les variables CSS peuvent accéder au DOM, ce qui signifie que vous pouvez les modifier avec JavaScript.

Cet exemple explique comment créer un script pour afficher et modifier la variable --blue utilisée dans l'exemple de la page précédente. Si vous n'êtes pas familier avec JavaScript, ne vous inquiétez pas. Vous pouvez apprendre plus sur JavaScript dans notre tutoriel JavaScript :

Exemple

<script>
// Obtenir l'élément racine
var r = document.querySelector(':root');
// Créer une fonction pour obtenir la valeur de la variable
function myFunction_get() {
  // Obtenir les styles (propriétés et valeurs) pour le racine
  var rs = getComputedStyle(r);
  // Alerter la valeur de la variable --blue
  alert("La valeur de --blue est: " + rs.getPropertyValue('--blue'));
}
// Créer une fonction pour définir la valeur de la variable
function myFunction_set() {
  // Définir la valeur de la variable --blue à une autre valeur (dans ce cas "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Essayez-le vous-même

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge pleinement cette propriété.

Fonction
var() 49.0 15.0 31.0 9.1 36.0

Fonction var() CSS

Fonction Description
var() Insérer la valeur de la variable CSS.