如何根据条件修改同class名元素的样式颜色？

核心问题原因 #

你循环里用document.querySelector('.spaces-left')每次只会抓取页面中第一个匹配的元素，不管刚生成的是哪一个，所以所有循环操作都在修改同一个元素；循环后querySelectorAll为空，大概率是元素没正确插入DOM，或者选择器匹配不到目标元素。

三种可行解决方案 #

1. 生成HTML时直接带样式（最推荐）

不用事后查询元素，直接在生成HTML字符串时根据数值判断，给元素添加样式类或行内样式：

// 假设循环中的数值变量是spacesLeft
const spacesLeft = 2; // 当前循环的剩余名额数值
const htmlContent = `
<div class="spaces-left ${spacesLeft <= 3 ? 'highlight-red' : ''}">
  剩余名额：${spacesLeft}
</div>
`;
// 插入到目标容器（比如id为container的元素）
document.getElementById('container').insertAdjacentHTML('beforeend', htmlContent);

然后在CSS里定义样式：

.highlight-red {
  color: #ff4444; /* 你需要的高亮颜色 */
}

这种方式最高效，完全避免DOM查询的问题。

2. 循环插入后立即获取当前元素修改

每次用insertAdjacentHTML插入元素后，通过容器的lastElementChild拿到刚插入的元素，直接修改样式：

const container = document.getElementById('container');
// 假设这是你的循环逻辑
for (let i = 0; i < 5; i++) {
  const spacesLeft = i + 1;
  const html = `<div class="spaces-left">剩余名额：${spacesLeft}</div>`;
  container.insertAdjacentHTML('beforeend', html);
  // 拿到刚插入的元素
  const currentEl = container.lastElementChild;
  if (spacesLeft <= 3) {
    currentEl.style.color = '#ff4444';
  }
}

这样每次操作的都是当前循环生成的元素，不会干扰之前的元素。

3. 循环结束后批量处理（确保元素已插入DOM）

如果必须等所有元素都生成完再处理，要确保所有insertAdjacentHTML执行完毕后，再用querySelectorAll遍历修改：

// 先完成所有元素的插入循环
const container = document.getElementById('container');
for (let i = 0; i < 5; i++) {
  const spacesLeft = i + 1;
  const html = `<div class="spaces-left">剩余名额：${spacesLeft}</div>`;
  container.insertAdjacentHTML('beforeend', html);
}

// 循环结束后批量修改
document.querySelectorAll('.spaces-left').forEach(el => {
  // 从元素文本中提取数值，注意转换为数字
  const value = parseInt(el.textContent.replace(/[^0-9]/g, ''), 10);
  if (value <= 3) {
    el.style.color = '#ff4444';
  }
});

注意：如果这里querySelectorAll仍返回空，检查一下你的容器是否真的在DOM中，或者生成的元素是否确实带有.spaces-left类。

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