本文介绍如何使用 javascript 动态为所有具有指定类名的元素批量添加新样式，避免修改原有类定义或使用内联样式，推荐采用 `classlist.add()` 配合预定义 css 类的现代实践方式。
在前端开发中，常需响应用户操作（如点击按钮）来统一更新多个 DOM 元素的视觉表现。直接修改 .box 这类已存在的 CSS 规则在运行时不可行（CSSOM 修改复杂且易出错），更合理、高效且可维护的方式是：为元素动态添加一个新 CSS 类，该类封装所需样式变更。
✅ 推荐实现方案
首先，在 CSS 中定义一个新类（例如 .redpad），声明希望应用的样式：
.box {
border: 1px solid;
display: inline-block; /* 建议改为 inline-block，使 padding 生效 */
}
.redpad {
background-color: red;
padding: 0.5em;
}? 注意：原示例中 display: inline 会使 padding 在垂直方向无效，建议改为 inline-block 或 block 以确保样式正常渲染。
接着，使用现代 JavaScript 实现逻辑：
const button = document.querySelector('button');
const boxes = document.querySelectorAll('.box');
button.addEventListener('click', turnRedAndAddPadding);
function turnRedAndAddPadding() {
boxes.forEach(box => box.classList.add('redpad'));
}HTML 结构保持简洁，移除内联 onclick（符合现代 Web 最佳实践）：
立即学习“前端免费学习笔记（深入）”；
Box 1Box 2Box 3
? 关键技术点说明
- querySelectorAll('.box')：返回所有匹配 .box 的静态 NodeList，安全可靠，不受后续 DOM 变更影响；
- forEach()：对每个 .box 元素执行操作，语义清晰、兼容性好（IE9+）；
- element.classList.add()：原子化添加类名，自动去重，不干扰其他已有类；
- addEventListener：解耦 HTML 与 JS，提升可维护性与可测试性，是当前标准做法。
⚠️ 注意事项
- 若需支持“再次点击取消样式”，可改用 classList.toggle('redpad')；
- 避免使用 element.className += ' redpad' —— 易引发重复添加、空格处理错误等 bug；
- 不要尝试通过 document.styleSheets 动态插入 CSS 规则，既复杂又难以调试，且存在跨域限制。
此方法简洁、健壮、符合标准，是动态批量样式控制的首选方案。
