本文介绍在 JavaScript 中高效批量设置多个 DOM 元素 CSS 样式的三种主流方法，重点推荐使用数组 + forEach 的现代写法，并提供兼容性方案与关键注意事项。
本文介绍在 javascript 中高效批量设置多个 dom 元素 css 样式的三种主流方法，重点推荐使用数组 + `foreach` 的现代写法，并提供兼容性方案与关键注意事项。
在实际前端开发中，频繁为多个具有不同 ID 的元素统一设置样式（如 display: block）时，重复调用 document.getElementById() 不仅冗长，还难以维护。幸运的是，JavaScript 提供了简洁、可扩展的解决方案。
✅ 推荐方案：数组 + forEach（ES6+，语义清晰）
将目标 ID 存入数组，遍历并统一操作，代码简洁且易读：
const ids = ["fill2a", "show2", "choice2"];
ids.forEach(id => {
const el = document.getElementById(id);
if (el) el.style.display = "block"; // ✅ 建议添加存在性检查
});? 小技巧：el && (el.style.display = "block") 可进一步简化为短路写法，但显式 if 更利于调试。
? 替代方案：for...of 循环（兼容性更广）
若需支持较老环境（如 IE），可用传统循环替代 forEach：
立即学习“前端免费学习笔记（深入）”；
const ids = ["fill2a", "show2", "choice2"];
for (const id of ids) {
const el = document.getElementById(id);
if (el) el.style.display = "block";
}⚡ 进阶方案：querySelectorAll + 类选择器（更优实践）
虽然问题限定于 ID，但强烈建议重构为使用 class——它天然支持批量操作，语义更合理，性能也更优：
<!-- HTML 中改为添加统一 class --> <div id="fill2a" class="target-section"></div> <div id="show2" class="target-section"></div> <div id="choice2" class="target-section"></div>
// 一行搞定，无需管理 ID 列表
document.querySelectorAll(".target-section").forEach(el => {
el.style.display = "block";
});✅ 优势：无需硬编码 ID、支持动态增删元素、CSS 可复用、便于后期样式抽离。
⚠️ 重要注意事项
- 始终校验元素是否存在：getElementById 在 ID 不存在时返回 null，直接访问 .style 会报错 Cannot set property 'display' of null；
- 避免内联样式污染：长期项目中，优先通过切换 CSS class（如 el.classList.add("visible")）控制样式，保持结构与样式的分离；
- ID 唯一性不可违背：切勿为多个元素分配相同 ID；若需批量操作，class 才是语义正确的选择。
综上，从 ["id1","id2","id3"].forEach(...) 入手是快速提升代码质量的实用起点，而向 class + querySelectorAll 迁移，则是迈向可维护前端工程的关键一步。
