Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<head>
<style>
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}

body {
couleur de fond: var(--primary-bg-color);
}

.container {
couleur: var(--primary-bg-color);
couleur-de-fond: var(--primary-color);
padding: 15px;
}

.container h2 {
border-bottom: 2px solide var(--primary-bg-color);
}

.container .note {
bordure: 1px solide var(--primary-bg-color);
padding: 10px;
}
</style>

// Créer une fonction pour obtenir la valeur d'une variable
function myFunction_get() {
// Obtenez 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'));
}

// Créer une 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>
</head>
<body>

<h1>Obtenir et changer une variable CSS avec JavaScript</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p class="note">Ceci est une note !</p>
</div>
<br>

<button type="button" onclick="myFunction_get()">Obtenir une variable avec JavaScript</button>
<button type="button" onclick="myFunction_set()">Changer la variable avec JavaScript</button>

</body>

</html>