如何从css变量中获取值并使用javascript自动多次（循环）更改它

我想更改我的

、

和

标签的颜色

我在css中声明了几个变量，如下所示：

:root{
    --color1 : #E11F28;
    --color2 : #F8981D;
    --color3 : #1DAD4B;
}

---

我的问题是如何获得该值，并使用javascript自动更改它几次并循环（从数字1到3）

下面是一个简单的示例

当然，您需要弄清楚如何通过更改来更改正确的规则

var declaration = document.getElementById('x').sheet.rules[0].style;

鉴于您自己编写的没有javascript，并且除了一个单一的样式规则之外，您完全没有显示任何内容，这是一件至少您需要自己弄清楚的事情

但是。。。它起作用了

函数changecolors（）{
const changeit=style=>{
设p=style.getPropertyValue（'color'）。替换（/\d/，x=>x%3+1）；
style.setProperty（'color'，p）；
}
var声明=document.getElementById（'x'）.sheet.rules；
changeit（声明[0]。样式）
changeit（声明[1]。样式）
changeit（声明[2]。样式）
}
设置间隔（更改颜色，1000）
：根目录{
--颜色1:#E11F28；
--颜色2:#F8981D；
--颜色3:#1DAD4B；
}

h1{
颜色：var（--color1）；
}
氢{
颜色：var（--color1）；
}
h3{
颜色：var（--color1）；
}
H1
氢
H3
我真正想要的是这样


let html=document.querySelector（`html`）；
var color=['红色'、'绿色'、'蓝色']；
var i=0；
让uid=setInterval（（）=>{
i=（i+1）%color.length；
改变=颜色[i]；
setProperty（`--theme`、`${change}`）；
}, 1000);
：根目录{
--主题：黑色；
}
h1{
颜色：var（--主题）；
}

这里有文字
有时会有帮助，我如何使用3值进行更改？我想使用javascript进行更改，这样我就可以将颜色与我的幻灯片进行匹配。我的意思是，所有标题都可能是颜色1，然后在1秒后更改为颜色2，最后一种颜色后它又更改为颜色1。我如何进行更改？现在呢，它和你想的一样吗？