如何实现每隔500ms为每个<p>元素依次应用蓝色样式？

你的代码存在几个问题，导致无法实现“每隔500ms为每个

元素依次应用蓝色样式”的效果：

• 使用setInterval会重复触发样式切换，但你需要的是一次性依次给元素添加样式，应该用setTimeout
• 所有定时器都设置500ms延迟，会导致所有

  几乎同时变色，无法实现“依次”执行的效果

• toggle会反复添加/移除类，如果你只需要让元素变成蓝色，用add更合适

下面是修正后的代码：

HTML（无需修改） #

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, ratione.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, ratione.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, ratione.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, ratione.
</p>

CSS（无需修改） #

.blue {
  color: blueviolet;
}

JavaScript（核心修正） #

const paras = document.getElementsByTagName("p");
for (let index = 0; index < paras.length; index++) {
  // 根据索引计算延迟：第n个元素延迟 n * 500ms，实现依次变色
  setTimeout(() => {
    paras[index].classList.add("blue");
  }, index * 500);
}

如果你的需求是循环轮换高亮（比如第一个变蓝→500ms后第二个变蓝、第一个恢复→再500ms第三个变蓝、第二个恢复……循环往复），可以用这种写法：

const paras = document.getElementsByTagName("p");
let currentIndex = 0;

setInterval(() => {
  // 先移除所有元素的蓝色样式
  for (const p of paras) {
    p.classList.remove("blue");
  }
  // 给当前索引的元素添加样式
  paras[currentIndex].classList.add("blue");
  // 更新索引，循环回到开头
  currentIndex = (currentIndex + 1) % paras.length;
}, 500);

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