javascript - 我如何从 css 变量中获取值并使用 javascript 多次自动更改它(循环)

Question

我想改变我的 <h1> 的颜色, <h2>和 <h3>标签。

我在 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>