使用 jquery 或 javascript 更改 CSS 根变量答案

【问题标题】：Change CSS root variable with jquery or javascript使用 jquery 或 javascript 更改 CSS 根变量
【发布时间】：2016-11-13 08:56:25
【问题描述】：

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

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

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

【问题讨论】：

这能回答你的问题吗？ Modify CSS variables / custom properties in jQuery

标签： jquery css

【解决方案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>

【讨论】：

document.documentElement.style.setProperty('--themeColor', '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6)); 这行得通吗？
@unkn0wn 可能有点，但你不会得到所有颜色。十六进制颜色来自0 - F，这就是为什么white 是#FFFFFF。我会定义一组颜色。还想象一下 #010101 和 #000000 的区别对于我们人类来说几乎是不可见的，现在你甚至可以得到 #000001 。 . .
@unkn0wn 如果您想创建类似的随机颜色，请尝试使用rgb() 或rgba() 这是CSS，如果使用rgb() 和a，则每个值都来自0 - 255 rgba() 从 0 - 1 变为 opacity 所以 a { color: rgba(100, 100, 100, 0.7); }

【解决方案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！

【讨论】：