Saturday, June 10

Tag: Update CSS variable with Javascript

CSS Tricks

Updating a CSS Variable with JavaScript

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 => {'--mouse-x', e.clientX + "px");'--mouse-y', e.clientY + "px"); }); That's all.Source: