使用jquery或javascript更改CSS根变量

Question

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

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

现在我已经var(--themeColor)到处使用,我想--themeColor在每次重新加载时分配一个随机颜色.这可能吗？

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>

Answer 2

您可以按如下方式在 jquery 中执行此操作（使用与 caramba 相同的示例）：

$(':root').css('--themeColor', (color = ["red", "green", "lime", "purple", "blue"])[Math.floor(Math.random() * color.length)]);

:root {
  --themeColor: orange;
}

a {
  color: var(--themeColor)
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="#">Hello world</a>
<div>Test</div>

这可能不适用于所有版本的 JQuery！