首页 > 网页制作 >原生JS循环为容器元素添加三类CSS类

原生JS循环为容器元素添加三类CSS类

来源：互联网 2026-07-15 19:44:01

javascript资讯合集

使用原生JavaScript的querySelectorAll获取容器元素，遍历时通过index%3+1计算循环编号，利用classList.add与remove动态添加移除类名，实现按1→2→3规律循环切换三种CSS样式。该方法可用于轮播图、高亮标记等场景，无需依赖jQuery，代码简洁高效，易于维护，性能优越。

本文教你用纯 JavaScript（无需 jQuery）为一组具有相同初始类名的容器元素，按 1→2→3→1→2→3 的规律循环添加不同的 CSS 类，实现样式轮换效果。

在实际开发中，经常需要让一组元素按顺序应用不同的样式——例如轮播图的指示器、列表的交替背景色或卡片组的花色排列。纯 JavaScript 就能轻松搞定，完全不需要依赖 jQuery。核心思路很简单：获取所有目标元素，遍历并根据索引位置计算余数，动态添加对应类名。下面直接给出两种可靠的实现方案。

更灵活的写法（保留原始类并叠加新类）

const containers = document.querySelectorAll('.test');
containers.forEach((el, index) => {
  const cycleIndex = (index % 3) + 1;
  // 先清除可能已存在的 test1/test2/test3 类
  el.classList.remove('test1', 'test2', 'test3');
  // 再添加对应的新类
  el.classList.add(`test${cycleIndex}`);
});

这样既保持了语义清晰，又避免了类名冲突，兼容性也足够好（支持所有现代浏览器及 IE10+）。

关键知识点说明

document.querySelectorAll('.test') 返回静态 NodeList，安全可靠，不用担心动态添加元素时的变化问题。
index % 3 是实现循环的核心：索引 0,1,2,3,4,5... 对应余数 0,1,2,0,1,2...，加 1 后即得 1,2,3,1,2,3...。这个规律非常干净。
classList.add() 和 .remove() 是操作类名的标准、安全方式，比直接拼接字符串要靠谱得多。
不建议使用全局计数器（如 count++）——容易出错且完全没有必要，索引本身就提供了天然的唯一序号。

补充：CSS 类定义建议（与 HTML 一致）

确保你的 CSS 正确声明了样式：

.test1 { background: blue; }
.test2 { background: green; }
.test3 { background: yellow; }
/* .test 原始类可留作基础样式或删除（因已被替换） */

运行上述脚本后，HTML 将自动变为：

This container must have class="test1"
This container must have class="test2"
This container must have class="test3"
From here the function needs to repeat so this container must have class="test1"

总结：只需 4 行核心代码，就能实现任意数量容器的三阶循环样式分配——简洁、可读、无依赖，非常适合初学者理解与复用。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述