本文介绍如何使用现代javascript动态为所有具有相同类名的元素批量添加新样式，避免内联脚本和直接操作cssom，推荐采用classlist.add()配合预定义css类的方式实现。
在前端开发中，常需响应用户交互（如点击按钮）来统一更新多个具有相同类名的元素样式。但需明确：JavaScript 无法直接修改已定义的 CSS 类规则（如动态向 .box 规则注入 background-color: red），因为浏览器的 CSSOM（CSS Object Model）不支持安全、跨浏览器的运行时类定义修改。因此，最佳实践是“添加新类”而非“修改原类”。
✅ 推荐方案：添加预设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获取元素并批量添加该类：
// 获取按钮和所有 .box 元素
const button = document.querySelector('button');
const boxes = document.querySelectorAll('.box');
// 使用 addEventListener 替代内联 onclick（更可维护、符合现代规范）
button.addEventListener('click', turnRedAndAddPadding);
function turnRedAndAddPadding() {
boxes.forEach(box => {
box.classList.add('redpad'); // 安全、幂等：重复调用不会报错或重复添加
});
}对应HTML结构（移除了内联 onclick，语义更清晰）：
立即学习“前端免费学习笔记（深入）”；
<button type="button">Press</button> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div>
? 为什么不用 getElementsByClassName？
document.getElementsByClassName('box') 返回的是 实时 HTMLCollection，若后续DOM变动可能引发意外行为；而 querySelectorAll('.box') 返回静态 NodeList，遍历时更稳定可靠，且语法统一、支持复杂选择器。
? 进阶提示：支持切换/移除样式
若需实现“点击添加，再点击移除”的切换效果，可改用 classList.toggle()：
function toggleRedAndPadding() {
boxes.forEach(box => box.classList.toggle('redpad'));
}✅ 总结
- ❌ 不要尝试动态重写CSS规则（如操作 <style> 标签或 document.styleSheets），兼容性差、易出错；
- ✅ 用 querySelectorAll 精准选取元素；
- ✅ 用 forEach + classList.add() 批量应用样式类；
- ✅ 将样式逻辑完全交由CSS控制，JS仅负责状态管理——这是关注点分离（Separation of Concerns）的最佳体现。
此方法简洁、高效、可扩展，适用于任何需要批量样式控制的场景。
