CSS Variables in JavaScript

Demo to show how JS and CSS can interact in the future

by Sir_Pepe

HTML

<button value="red">Rot!</button>
<button value="green">Grün!</button>
<p>Hallo Welt</p>

CSS

:root {
  --color: red;
}

p {
  color: var(--color);
}

JavaScript

$('button').click(function(evt){
  document.body.style.setProperty('--color', evt.target.value);
});