如何使用数组更改项的颜色

Question

我必须用数组的颜色来改变列表项的颜色。

要修改的元素。

<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__items，然后循环通过colorArray和匹配项目[currIndex].style。backgroundColor = colorArray[index]但每次都得到err

如果有人能给我建议如何解决这个问题，我将不胜感激。

<ul class="list">
<li class="list__item">1</li> <!-- color red-- >
<li class="list__item">2</li><!-- color yellow-- >
<li class="list__item">3</li><!-- color blue-- >
</ul>`

Answer 1

您可以使用data-attribute来存储列表项所需的颜色。

循环遍历项目并将每个项目的颜色设置为保存的颜色，例如:

document.querySelectorAll(`ul.list li`)
.forEach(li => li.style.color = li.dataset.color);

<ul class="list">
<li class="list__item" data-color="red">1 red</li>
<li class="list__item" data-color="yellow">2 yellow</li>
<li class="list__item" data-color="blue">3 blue</li>
</ul>

Answer 2

您可以简单地通过使用querySelectorAll来实现这一要求，然后遍历它以应用样式。

Live Demo:

const listItem = document.querySelectorAll('.list__item');
const colorArray = ["red", "yellow", "blue"];
listItem.forEach((item, index) => item.style.color = colorArray[index]);

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