如何通过JavaScript循环获取并自动切换CSS变量值更改标题颜色

很简单，咱们可以分两种常见场景来实现——一种是一次性给h1、h2、h3分别对应上--color1到--color3的颜色，另一种是让它们的颜色自动循环切换。下面给你具体的代码示例：

场景1：一次性为每个标题分配对应颜色 #

这种适合页面加载时直接把每个标题和对应的CSS变量绑定：

首先假设你的HTML结构是这样的：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

然后用这段JavaScript代码实现：

// 获取根元素（对应CSS里的:root）
const rootElement = document.documentElement;
// 按顺序获取h1、h2、h3元素
const headings = [document.querySelector('h1'), document.querySelector('h2'), document.querySelector('h3')];

// 循环遍历每个标题，设置对应颜色
headings.forEach((heading, index) => {
  // 构造CSS变量名：--color1、--color2、--color3
  const colorVariableName = `--color${index + 1}`;
  // 获取该变量的实际颜色值（注意用getComputedStyle才能拿到样式表中定义的变量）
  const colorValue = getComputedStyle(rootElement).getPropertyValue(colorVariableName).trim();
  
  // 给标题设置颜色（先判断元素是否存在，避免报错）
  if (heading) {
    heading.style.color = colorValue;
  }
});

场景2：自动循环切换标题颜色 #

如果你想要标题颜色每隔一段时间自动切换（比如轮流使用三个变量的颜色），可以用定时任务来实现：

const rootElement = document.documentElement;
const headings = [document.querySelector('h1'), document.querySelector('h2'), document.querySelector('h3')];
// 记录当前循环的起始颜色索引，初始为0对应--color1
let currentCycleIndex = 0;

// 定义切换颜色的函数
function rotateHeadingColors() {
  headings.forEach((heading) => {
    if (!heading) return;
    
    // 计算当前标题要使用的颜色变量索引，通过取模实现循环
    const targetVarIndex = (currentCycleIndex + headings.indexOf(heading)) % 3 + 1;
    const colorVariableName = `--color${targetVarIndex}`;
    const colorValue = getComputedStyle(rootElement).getPropertyValue(colorVariableName).trim();
    
    heading.style.color = colorValue;
  });
  
  // 更新起始索引，让下一次切换从下一个颜色开始
  currentCycleIndex = (currentCycleIndex + 1) % 3;
}

// 页面加载时先执行一次，设置初始颜色
rotateHeadingColors();
// 每隔2秒自动切换一次颜色（时间可以自己调整，单位是毫秒）
setInterval(rotateHeadingColors, 2000);

关键知识点说明 #

• getComputedStyle(rootElement)：必须用这个方法才能获取到样式表中定义的:root变量值，直接用rootElement.style.getPropertyValue只能拿到内联设置的变量。
• trim()：用来去除getPropertyValue返回值可能带有的空格，避免样式解析出错。
• 取模运算%3：用来实现循环逻辑，确保变量索引始终在1-3的范围内。

内容的提问来源于stack exchange，提问作者Farouq Mulya Al Simabua