Updating a CSS Variable with JavaScript

added by JavaScript Kicks
9/13/2018 7:00:07 AM

587 Views

Here's a CSS variable (formally called a " CSS custom property"): :root { --mouse-x: 0px; --mouse-y: 0px; } Perhaps you use them to set a position: .mover { left: var(--mouse-x); top: var(--mouse-y); } To update those values from JavaScript, you'd: let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProperty('--mouse-y', e.clientY + "px"); }); That's all.


0 comments