本文介绍如何使用现代 javascript 动态为所有具有相同 css 类的元素批量添加新样式，避免内联脚本与直接操作样式表，推荐采用 `classlist.add()` 结合事件监听器的安全高效方案。
在实际开发中，不能也不应直接修改已定义的 CSS 类规则（如 .box）的样式声明——浏览器不提供原生 API 修改
以下是完整、规范的实现步骤：
✅ 正确做法：添加新类而非修改原类
首先，在 CSS 中定义增强样式的新类：
.box {
border: 1px solid;
display: inline-block; /* 建议改为 inline-block，使 padding 生效 */
}
.redpad {
background-color: red;
padding: 0.5em;
}然后，使用现代 JavaScript 进行逻辑绑定（避免 onclick 内联属性）：
// 获取按钮和所有 .box 元素
const button = document.querySelector('button');
const boxes = document.querySelectorAll('.box');
// 使用 addEventListener 替代内联 onclick（更安全、可维护）
button.addEventListener('click', turnRedAndAddPadding);
function turnRedAndAddPadding() {
// 遍历 NodeList 并为每个 .box 元素添加 .redpad 类
boxes.forEach(box => box.classList.add('redpad'));
}对应 HTML 结构（注意移除内联 onclick，并建议添加 type="button" 防止表单误提交）：
Box 1Box 2Box 3
⚠️ 注意事项与优化建议
- display: inline 限制 padding 显示：inline 元素的上下 padding 虽然存在，但不会影响布局高度；建议改用 inline-block 或 flex 等更可控的显示模式。
- 避免重复添加：若需支持“切换”效果（点一次加样式，再点一次移除），可用 classList.toggle('redpad') 替代 add()。
- 性能考量：querySelectorAll 返回静态 NodeList，适合一次性批量操作；若元素动态增删频繁，可考虑事件委托或重新查询。
- 可访问性：为按钮添加语义化 aria-label（如 aria-label="Apply red background and padding to all boxes"）以提升无障碍体验。
此方案符合现代 Web 开发规范：分离结构（HTML）、表现（CSS）与行为（JS），具备可维护性、可测试性与跨浏览器兼容性。
