20 lines (15 loc) · 664 Bytes

Changing CSS variables using JS dynamically

Project learnings

css variable declaration in :root
variable syntax --var_name
accessing variables inside css using var(--var_name)
capturing input value using querySelectorAll and adding MULTIPLE event listener for 2 events on the element

['change','mousemove'].forEach(evt => inputs.addEventListener(evt, handleUpdate));

passing in the function for the event listener
adding suffix like 'px' for the data-values using the dataset object in elements
getting and setting of the css variable using

document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);