Change CSS Variables by JavaScript

by bc_rikko

HTML

<div class="item a">a</div>
<div class="item b">b</div>
<div class="item c">c</div>
<input id="slider" type="range" min=0 max=300>

CSS

:root {
  --base-width: 100px;
}

.item.a {
  width: calc(var(--base-width));
  background-color: red;
}
.item.b {
  width: calc(var(--base-width) * 2);
  background-color: green;
}
.item.c {
  width: calc(var(--base-width) * 3);
  background-color: blue;
}

JavaScript

const $ = el => document.querySelector(el)

$('#slider').addEventListener('input', e => {
  $(':root').style.setProperty('--base-width', `${e.target.value}px`);
})