本文介绍如何使用 javascript 动态为所有具有相同类名的元素批量添加新样式，避免内联脚本和直接操作 cssom，推荐采用 `classlist.add()` 配合预定义 css 类的现代方案。
在实际开发中，我们常需响应用户交互（如点击按钮）来统一更新一批 DOM 元素的视觉表现。但需注意：JavaScript 无法真正“修改已存在的 CSS 类规则”（即不能动态重写 .box { ... } 的声明），而应通过为元素添加新的 CSS 类，再由该类提供目标样式——这是语义清晰、性能良好且符合 Web 标准的最佳实践。
✅ 推荐实现步骤
- 选取目标元素：使用 document.querySelectorAll('.box') 获取所有 .box 元素，返回静态 NodeList，安全可靠；
- 绑定事件监听器：用 addEventListener 替代内联 onclick，提升可维护性与安全性；
- 批量更新类名：遍历元素列表，调用 element.classList.add('redpad') 添加新样式类；
- 预先定义 CSS 类：在样式表中声明 .redpad，包含 background-color: red 和 padding 等样式。
? 完整代码示例
<style>
.box {
border: 1px solid #ccc;
display: inline-block; /* 修正：inline 不支持 padding，改用 inline-block */
margin: 4px;
}
.redpad {
background-color: #ff4757;
padding: 0.5em 1em;
color: white;
}
</style>
<button type="button">Press</button>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script>
const button = document.querySelector('button');
const boxes = document.querySelectorAll('.box');
button.addEventListener('click', turnRedAndAddPadding);
function turnRedAndAddPadding() {
boxes.forEach(box => box.classList.add('redpad'));
}
</script>⚠️ 注意事项
- 避免 display: inline + padding：行内元素（inline）的垂直 padding 不会生效，建议改用 inline-block 或 flex；
- 防止重复添加：若需切换样式（如“再点一次恢复”），可用 classList.toggle('redpad') 实现开关效果；
- 兼容性考虑：classList 在 IE10+ 完全支持；如需支持 IE9，可降级使用 element.className += ' redpad'（需自行去重）；
- 性能提示：对大量元素操作时，forEach 足够高效；若涉及复杂动画或高频触发，可结合 requestAnimationFrame 优化。
该方法简洁、可扩展性强，是现代前端开发中操作样式的标准范式。
