Het bijwerken van een CSS-Variabele met JavaScript

0
12

Hier is een CSS-variabele (formeel heet een “aangepaste CSS eigenschap”):

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

Misschien gebruikt u ze naar een positie:

.mover {
links: var(–muis-x);
top: var(–muis-y).
}

Bijwerken van deze waarden van JavaScript, zou je:

laat root = document.documentElement;

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

Dat is alles.

Zie de Pen Set CSS Variabele met JavaScript door Chris Coyier (@chriscoyier) op CodePen.