原生JavaScript循环为容器元素添加三类CSS类的实现方法

通过原生脚本语言的选择器获取全部目标元素。利用循环遍历每个元素，依据下标对三取模再加一，依次为容器添加类名test一、test二、test三，达到背景色循环切换。使用类别列表的添加方法防止重复。将执行代码放置在文档对象模型加载完毕的事件中。

本文介绍如何使用纯 JavaScript（不依赖任何第三方库）为一组具有相同初始类名的容器元素，按 1-2-3 的顺序循环添加 test1、test2、test3 类，实现背景色等样式的周期性切换。

今天来聊聊一个很实用的前端需求：如何用原生 JavaScript，为一组拥有相同初始类名的容器元素，按照 1-2-3 的顺序循环添加 test1、test2、test3 类，从而实现背景色等样式的周期性切换。简单来说，就是用纯 JS 实现一个“类名轮播”效果，不依赖任何第三方库。

实现这个需求的逻辑其实非常清晰。首先获取所有目标元素，然后遍历它们，根据每个元素的索引位置计算出一个循环序号，最后动态添加对应的类名。这个思路本身并不复杂，但如何写出简洁可靠的代码，还是有一些技巧的。

✅ 推荐写法：使用 forEach 与模运算（简洁高效）

// 获取所有 class="test" 的元素
const containers = document.querySelectorAll('.test');

containers.forEach((element, index) => {
  // 计算循环序号：0→1, 1→2, 2→3, 3→1, 4→2, 5→3...
  const cycleIndex = (index % 3) + 1;
  // 移除原始 class="test"（可选，避免样式冲突），再添加新类
  element.className = `test${cycleIndex}`;
});

? 说明：index % 3 的结果是 0、1、2，加 1 后对应 1、2、3，完美匹配需求。这里通过 element.className = ... 直接替换整个类名，操作简洁明了。如果容器中还包含其他类需要保留，则需要改用 classList.replace() 或更精细的字符串拼接。具体可参考下面的进阶建议。

? HTML 与 CSS 示例（可直接运行测试）







This container must ha ve class="test1"
This container must ha ve class="test2"
This container must ha ve class="test3"
From here the function need repeat so this container must ha ve class="test1"
This container must ha ve class="test2"
This container must ha ve class="test3"

⚠️ 注意事项与进阶建议

避免重复添加类：如果容器已经包含 test1 等类名，直接使用 classList.add() 可能导致重复（例如变成 test test1 test1）。最稳妥的方式是使用 className = ... 直接替换，或者用更精确的操作：
```
element.classList.remove('test', 'test1', 'test2', 'test3');
element.classList.add(`test${(index % 3) + 1}`);
```
兼容性：querySelectorAll 和 forEach 在现代浏览器中支持良好。但需要注意的是，IE 不支持 NodeList 的 forEach 方法，如果项目需要兼容 IE，建议改用传统的 for 循环：
```
for (let i = 0; i < containers.length; i++) {
  containers[i].className = `test${(i % 3) + 1}`;
}
```
执行时机：确保脚本在 DOM 加载完成后执行。最简单的方式是将