< Back to JavaScript 30

Update CSS Variables

• Project Synopsis and Code

  In this lesson I update CSS variables using JavaScript.

  First I get all of the <input> elements on the page with a class of '.controls' (document.querySelectorAll('.controls input')).

  I listen for both 'change' and 'mousemove' each <input> (inputs.forEach(input => input.addEventListener('change', handleUpdate))).

  In handleUpdate() - First get the 'suffix' from the [data-sizing] attribute on the <input> element. I use it to set the correct unit (px) when modifying the 'style'. Then modify the 'style' that matches the <input> 'name' (.style.setProperty(`--${this.name}`, this.value + suffix).

  See the Pen JavaScript30 - 3 - Update CSS Variables by Corey Noble (@CoreyNoble) on CodePen.