使用jquery或javascript更改CSS根变量

我在我的网页中使用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); } 

 Hello world 
Test 

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); } 

  Hello world 
Test