如何使用数组修改HTML列表项的颜色

云原生阿岚

2026-8-5

问题描述

我需要用颜色数组修改列表项的背景色，对应的HTML结构如下：

<ul class="list">
      <li class="list__item">1</li>
      <li class="list__item">2</li>
      <li class="list__item">3</li>
</ul>

颜色数组定义：

const colorArray = ["red", "yellow", "blue"];

我尝试遍历list__item元素和该颜色数组，通过item[currIndex].style.backgroundColor = colorArray[index]设置颜色，但每次执行都报错，希望有人能给出解决建议。

预期效果：

<ul class="list">
  <li class="list__item">1</li> <!-- 背景色为red -->
  <li class="list__item">2</li><!-- 背景色为yellow -->
  <li class="list__item">3</li><!-- 背景色为blue -->
</ul>

解决方案

常见报错原因

元素集合未转成数组：如果用document.getElementsByClassName('list__item')获取元素，返回的是HTMLCollection（类数组对象），不是真正的数组，直接通过item[currIndex]访问可能引发错误。
索引越界或不匹配：遍历逻辑错误，导致索引超出颜色数组或元素集合的长度，或者两个集合的索引对应关系出错。

可行的实现代码

方法1：使用forEach遍历（简洁推荐）

// 将HTMLCollection转为数组，方便用forEach遍历
const listItems = Array.from(document.getElementsByClassName('list__item'));

listItems.forEach((item, index) => {
  // 确保颜色数组存在对应索引的颜色，避免无意义赋值
  if (colorArray[index]) {
    item.style.backgroundColor = colorArray[index];
  }
});

方法2：使用for循环（兼容性更好）

// querySelectorAll返回NodeList，支持直接按索引访问
const listItems = document.querySelectorAll('.list__item');

for (let i = 0; i < listItems.length; i++) {
  if (i < colorArray.length) {
    listItems[i].style.backgroundColor = colorArray[i];
  }
}