CSS Modifier les variables avec JavaScript
Modifier 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 la façon dont vous pouvez créer un script pour afficher et modifier la variable --blue à partir 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 savoir plus sur JavaScript dans notre tutoriel JavaScript :
Exemple
<script>
// Get the root element
var r = document.querySelector(':root');
// Create a function for getting a variable value
function
myFunction_get() {
// Get the styles (properties and values) for the
root
var rs = getComputedStyle(r);
// Alert the value of
the --blue variable
alert("The value of --blue is: " +
rs.getPropertyValue('--blue'));
}
// Create a function for setting a
variable value
function myFunction_set() {
// Set the value of
variable --blue to another value (in this case "lightblue")
r.style.setProperty('--blue', 'lightblue');
}
</script>
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la
var()fonction.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Fonction CSS var()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |