有没有办法在 CSS 中使用 Javascript 变量来自定义颜色，或者另一种方法来实现这一点？

【问题标题】：Is there a way to use a Javascript variable in CSS to customize colour, or an alternative way to achieve this?有没有办法在 CSS 中使用 Javascript 变量来自定义颜色，或者另一种方法来实现这一点？
【发布时间】：2022-01-02 01:28:54
【问题描述】：

我正在努力做到这一点，以便当您浏览网页上的某些元素时，它们会变为预定义调色板的随机颜色。

我用 JS 编写了一个从现有调色板中挑选的基本脚本。

const pal = ["93FFF2","F8A5FF","FFBA41","71FF5B","9D6CFF"]
const txtCol = Math.floor(Math.random() * pal.length);
console.log(txtCol, pal[txtCol]);

然后，理想情况下，我可以在我的 CSS 中使用“txtCol”值，就像这样......

nav a:hover {
    color: (txtCol);
}

显然，这是行不通的。有什么办法可以实现我想要的吗？非常感谢:)

【问题讨论】：

是的，有可以使用js更改的css变量developer.mozilla.org/en-US/docs/Web/CSS/…

标签： javascript css arrays random

【解决方案1】：

您可以为每个mouseenter 事件（悬停开始时）组合css 变量和使用javascript 设置变量：

nav a:hover {
  color: var(--hover-color);
}

const pal = ["93FFF2","F8A5FF","FFBA41","71FF5B","9D6CFF"]
// every time the user starts hovering that element
document.querySelector('nav a').addEventListener("mouseenter", (event) => {
  // pick the random color
  const txtCol = pal[Math.floor(Math.random() * pal.length)];
  // set the css variable
  event.target.style.setProperty('--hover-color', '#' + txtCol)
})

【讨论】：

感谢您的快速回答！我为我缺乏理解而道歉，但我在使用该代码时收到错误Cannot read properties of null (reading 'addEventListener')，你知道可能是什么原因造成的吗？谢谢！
@Max 在您运行此代码时，页面上的<nav> 内没有<a>。
@Thomas 完美！非常感谢你们俩