如何從 css 變量中獲取值並使用 javascript 多次（循環）自動更改它

Question

我想更改我的<h1> 、 <h2>和<h3>標簽的 colors 。

我在 css 中聲明了幾個變量，如下所示：

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

我的問題是如何獲得該值並使用 javascript 多次自動更改它並循環（從數字 1 到 3）

Answer 1

這是一個簡單的例子

當然，你需要弄清楚如何通過改變來改變正確的規則

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

看到您自己沒有編寫任何 javascript並且除了單一樣式規則之外什么都沒有顯示，這是至少您需要自己弄清楚的一件事

但是......它有效

 function changecolors() { const changeit = style => { let p = style.getPropertyValue('color').replace(/\d/, x => x%3 + 1); style.setProperty('color', p); } var declaration = document.getElementById('x').sheet.rules; changeit(declaration[0].style) changeit(declaration[1].style) changeit(declaration[2].style) } setInterval(changecolors, 1000);

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

 <style id="x"> h1 { color: var(--color1); } h2 { color: var(--color1); } h3 { color: var(--color1); } </style> <h1>H1</h1> <h2>H2</h2> <h3>H3</h3>

Answer 2

我真正想要的是這樣的

 let html = document.querySelector(`html`); var color = ['red', 'green', 'blue']; var i =0; let uid = setInterval(() => { i = (i+1)%color.length; change = color[i]; html.style.setProperty(`--theme`, `${change}`); }, 1000);

 :root { --theme: black; } h1 { color: var(--theme); }

 <h1> Text Goes Here </h1>

非常感謝我的朋友 Muhammad vickry Yanto 創建這個腳本

並感謝您回答我的問題