Variables CSS et JavaScript
Changer les variables avec JavaScript
Les variables CSS ont accès au DOM, ce qui signifie que vous pouvez les modifier avec JavaScript.
Voici un exemple de script pour afficher et changer la variable --primary-bg-color de l'exemple utilisé dans les pages précédentes. Pour l'instant, ne vous inquiétez pas si vous n'êtes pas familier avec JavaScript. Vous pouvez en apprendre davantage sur JavaScript dans notre Tutoriel JavaScript :
Exemple
<script>
// Obtenir l'élément racine
var r = document.querySelector(':root');
// Fonction pour obtenir la valeur d'une variable
function myFunction_get() {
// Obtenir les styles (propriétés et valeurs) pour la racine
var rs = getComputedStyle(r);
// Alerter la valeur de la variable --primary-bg-color
alert("La valeur de --primary-bg-color est : " + rs.getPropertyValue('--primary-bg-color'));
}
// Fonction pour définir une valeur de variable
function myFunction_set() {
// Définir la valeur de la variable --primary-bg-color à une autre valeur (dans ce cas "vert")
r.style.setProperty('--primary-bg-color', 'green');
}
</script> Fonction CSS var()
| Fonction | Description |
|---|---|
| var() | Insère la valeur d'une variable CSS |