CSS変数を制御するJavaScriptスニペット

Result

CSS変数を更新するJSスニペットです。べんり。

※本コードは非依存のバニラJSです

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");
});

css

.mover {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  left: var(--mouse-x);
  top: var(--mouse-y);
}

html

<div class="mover"></div>

via

Updating a CSS Variable with JavaScript