CSS Variables and JS

Update elements with css variables with simple JS

by Pranab Dey

HTML

<h1>This is text</h1>
<div class="controls">
  <label for="spacing">Spacing: </label>
  <input type="range" id="spacing" name="spacing" min="10" max="200" value="10" data-sizing="px">
  
  <label for="blur">Blur: </label>
  <input type="range" id="blur" name="blur" min="0" max="25" value="10" data-sizing="px">
  
  <label for="base">Base: </label>
  <input type="color" name="base" id="base">
</div>
  
  <img src="https://unsplash.it/400/200" alt="random image">

CSS

:root{
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

img{
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

h1{
  color: var(--base);
}

JavaScript

const inputs = document.querySelectorAll(".controls input");

function handleUpdate(){
  const suffix = this.dataset.sizing || '';
  document.body.style.setProperty(`--${this.name}`, `${this.value}${suffix}`);
}

inputs.forEach(el => el.addEventListener('input', handleUpdate));