使用JavaScript修改CSS变量

原文地址: Updating a CSS Variable with JavaScript | CSS-Tricks
随便看到的顺便记一下,虽然比较短小

这是一段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');
});

效果:

Comments
Write a Comment