使用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！