使用 JavaScript 更新 CSS 变量

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

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

也许您用它们来设置位置

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

要从 JavaScript 更新这些值，您将

let root = document.documentElement;

root.addEventListener("mousemove", e => {
  root.style.setProperty('--mouse-x', e.clientX + "px");
  root.style.setProperty('--mouse-y', e.clientY + "px");
});

就这样。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 使用 JavaScript 设置 CSS 变量。