Oppdatere en CSS-Variabel med JavaScript

0
24

Her er en CSS-variabel (formelt kalt en “egendefinert CSS eiendom”):

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

Kanskje du vil bruke dem til å sette av en stilling:

.mover {
venstre: var(–mus-x);
topp: var(–mus-y);
}

For å oppdatere disse verdiene fra JavaScript, og du vil:

la root = – dokument.documentElement;

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

Det er alt.

Se Penn Sett CSS Variabel med JavaScript av Chris Coyier (@chriscoyier) på CodePen.