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 => {   root.style.setProperty('--mouse-x', e.clientX + "px");   root.style.setProperty('--mouse-y', e.clientY + "px"); });

That’s all.

See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen.

The post Updating a CSS Variable with JavaScript appeared first on CSS-Tricks.

CSS-Tricks

Comments

comments

Add a Comment

Your email address will not be published. Required fields are marked *