求助：使用JavaScript为H1内各Span设置不同数组颜色，结果异常

你的代码问题出在两个核心点：

1. 选中的是<h1>标签本身而非内部的<span>元素，导致你一直在给整个标题设置颜色，而非单个字母
2. 内层循环会反复覆盖<h1>的颜色，最终只会保留数组最后一项的颜色，所有<span>继承了这个颜色，所以看起来全是最后一个颜色

正确代码实现 #

方案一：使用forEach遍历 #

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
// 精准选中h1下的所有span元素
const letterSpans = document.querySelectorAll('h1 span');

// 遍历每个span，根据索引对应颜色数组中的值设置颜色
letterSpans.forEach((span, index) => {
  span.style.color = colors[index];
});

方案二：使用for循环 #

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const letterSpans = document.querySelectorAll('h1 span');

for (let i = 0; i < letterSpans.length; i++) {
  letterSpans[i].style.color = colors[i];
}

关键说明 #

• 通过document.querySelectorAll('h1 span')直接定位到每个字母所在的<span>元素
• 遍历过程中，每个<span>对应颜色数组中同索引的颜色值，确保每个字母颜色独立且对应彩虹色序列

内容的提问来源于stack exchange，提问作者busayolawumi