Uppdatera en CSS-Variabel med JavaScript

0
21

Här är en CSS-variabel (formellt kallas en “CSS egen fastighet”):

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

Du kanske använda dem för att ange en position:

.mover {
vänster: var(–mus-x).
topp: var(–mus-y);
}

Att uppdatera dessa värden från JavaScript, skulle du:

låt root = dokument.documentElement;

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

Det är allt.

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