使用 jquery 或 javascript 更改 CSS 根变量

Question

我在我的网页中使用 CSS 变量并制作一种主题颜色，

 :root {
    --themeColor: #0afec0;
    --hoverColor: #fff;
    --bodyColor:  #EEF1EF;
}

现在我在任何地方都使用 var(--themeColor) ，我想在每次重新加载时为 --themeColor 分配一个随机颜色。这可能吗？

原文由 Mercurial 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过以下方式轻松完成此操作：

 document.documentElement.style.setProperty('--themeColor', 'red');

更新： 不确定问题是否只是像我想的那样改变颜色。现在我还添加了一个 getRandomColor() 示例。只是为了得到随机的东西可能是一项很大的工作，这取决于你是否想保存用户最后使用的颜色……

 // array with colors
var colors = [
  "red",
  "green",
  "lime",
  "purple",
  "blue"
];

// get random color from array
function getColor() {
   return colors[
     Math.floor(Math.random() * colors.length)
   ];
}

// Set the color from array
document.documentElement.style.setProperty('--themeColor', getColor());

 :root {
    --themeColor: orange;
}

a {
  color: var(--themeColor)
}

div {
  width: 100px;
  height: 100px;
  background-color: var(--themeColor);
}

 <a href="#">Hello world</a>
<div>Test</div>

原文由 caramba 发布，翻译遵循 CC BY-SA 3.0 许可协议