Aktualisieren einer CSS-Variable mit JavaScript

Hier ist eine CSS-Variable (offiziell als „CSS-Benutzerdefinierte Eigenschaft“ bezeichnet)

:root {
  --mouse-x: 0px;
  --mouse-y: 0px;
}

Vielleicht verwenden Sie sie, um eine Position festzulegen

.mover {
  left: var(--mouse-x);
  top: var(--mouse-y);
}

Um diese Werte aus JavaScript zu aktualisieren, würden Sie

let root = document.documentElement;

root.addEventListener("mousemove", e => {
  root.style.setProperty('--mouse-x', e.clientX + "px");
  root.style.setProperty('--mouse-y', e.clientY + "px");
});

Das ist alles.

Siehe den Pen Set CSS Variable with JavaScript von Chris Coyier (@chriscoyier) auf CodePen.