使用JavaScript更新CSS变量

这是一个CSS变量（正式称为“ CSS自定义属性 ”） html

css

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

你可以用它们来设定一个位置： css

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

如果要从JavaScript更新这些值，您需要： js

let root = document.documentElement;
root.addEventListener(“mousemove”, e => {
root.style.setProperty(‘–mouse-x’, e.clientX + “px”);
root.style.setProperty(‘–mouse-y’, e.clientY + “px”);
});