用原生 JS 循环添加三个重复 CSS 类
2026-05-26 20:48:43
0浏览
收藏
本文手把手教你用原生 JavaScript 实现一组 HTML 元素按 1→2→3→1→2→3 的规律动态轮换添加 `test1`/`test2`/`test3` 类，无需任何框架依赖，既简洁又可靠；通过 `querySelectorAll` + `forEach` + 取模运算（`index % 3 + 1`）轻松达成视觉循环效果，并贴心提醒 class 替换与保留的两种策略、DOM 加载时机、CSS 预置要点及扩展方法——无论你是刚入门的新手，还是需要快速落地样式的开发者，都能即学即用，轻松驾驭批量样式控制！
本文教你用纯 JavaScript（无需 jQuery）批量为具有相同类名的 HTML 容器按 1→2→3→1→2→3 的规律动态添加 `test1`/`test2`/`test3` 类，实现视觉循环效果。
在前端开发中，常需对一组结构相同的 DOM 元素进行规律性样式控制，例如为列表项、卡片容器等按周期轮换应用不同 CSS 类。本教程面向 JavaScript 初学者，提供简洁、可靠且无依赖的原生解决方案。
核心思路
利用 document.querySelectorAll() 获取所有目标元素（返回静态 NodeList），再通过 forEach() 遍历，结合取模运算（%） 实现「每 3 个元素为一组」的循环索引：(index % 3) + 1 可生成 1, 2, 3, 1, 2, 3... 序列，完美匹配需求。
✅ 推荐实现（简洁安全）
// 选取所有 class="test" 的容器
const containers = document.querySelectorAll('.test');
containers.forEach((el, index) => {
const cycleIndex = (index % 3) + 1; // 得到 1, 2, 3, 1, 2, 3...
el.className = `test${cycleIndex}`; // 直接替换整个 class 属性（覆盖原有 "test"）
});⚠️ 注意：el.className = ... 会完全替换原有 class。若需保留原始 test 类（如同时应用基础样式和变体样式），请改用：
el.classList.replace('test', `test${cycleIndex}`); // 或更稳妥地：先移除 test，再添加新类 el.classList.remove('test'); el.classList.add(`test${cycleIndex}`);
? 备选方案（手动计数器）
适合需要更显式逻辑控制的场景（如后续扩展条件判断）：
const containers = document.querySelectorAll('.test');
let counter = 0;
containers.forEach(el => {
counter++;
if (counter > 3) counter = 1;
el.classList.replace('test', `test${counter}`);
});? 关键注意事项
- 执行时机：确保脚本在 DOM 加载完成后运行。推荐将代码包裹在 DOMContentLoaded 事件中：
document.addEventListener('DOMContentLoaded', () => { // 上述代码放在这里 }); - CSS 预置：确保
