Aktualisieren von CSS-Variablen mit JavaScript

0
16

Hier ist eine CSS-Variablen (formal als eine “benutzerdefinierte CSS-Eigenschaft”):

:root {
–Maus-x: 0px;
–Maus-y: 0px;
}

Vielleicht haben Sie nutzen Sie, um die Einstellung der position:

.mover {
Links: var(–Maus-x);
oben: var(–Maus-y);
}

Zur Aktualisierung dieser Werte von JavaScript, würden Sie:

let Wurzel = document.documentElement;

root.addEventListener(“mousemove”, e => {
root.Stil.setProperty(‘–Maus-x’, e.clientX + “px”);
root.Stil.setProperty(‘–Maus-y’ e.clientY + “px”);
});

Das ist alles.

Finden Sie die Pen-Set von CSS-Variablen mit JavaScript von Chris Coyier (@chriscoyier) auf CodePen.