JavaScript中批量修改多ID元素CSS样式的简化写法咨询

当然可以简化重复代码，用数组是最常用的实现方式，下面详细说明几种可行的操作方法：

方法一：数组存储ID + forEach遍历 #

这是最直观的写法，把需要操作的ID统一放进数组，再遍历处理每个元素：

// 定义目标元素ID数组
const targetElementIds = ['fill2a', 'show2', 'choice2'];

// 遍历数组，逐个设置样式
targetElementIds.forEach(id => {
  const element = document.getElementById(id);
  // 加判断避免找不到元素时抛出错误
  if (element) {
    element.style.display = 'block';
  }
});

方法二：使用document.querySelectorAll批量选择元素 #

如果不想单独定义数组，可以直接用querySelectorAll通过多个ID选择器批量选中元素，再遍历设置样式：

// 用逗号分隔多个ID选择器，一次性选中所有目标元素
document.querySelectorAll('#fill2a, #show2, #choice2').forEach(el => {
  el.style.display = 'block';
});

这种写法更简洁，适合ID数量不多的场景；如果后续需要新增/修改目标ID，维护数组的方式会更灵活。

方法三：普通for循环（兼容旧浏览器） #

如果需要兼容IE8这类不支持forEach的旧浏览器，可以用普通for循环实现：

const targetElementIds = ['fill2a', 'show2', 'choice2'];
for (let i = 0; i < targetElementIds.length; i++) {
  const element = document.getElementById(targetElementIds[i]);
  if (element) {
    element.style.display = 'block';
  }
}

你提到的类似style.display=block for ids='fill2a','show2','choice2'的语法，JavaScript本身没有这种原生写法，但上面的几种方式都能达到同样的批量简化效果，避免重复编写相同的DOM操作代码。

内容的提问来源于stack exchange，提问作者M.Riyan