如何简化JS代码 一次性为多个变量批量设置style.display属性

简化方案 #

有几种常用的实现方式，都可以避免重复编写赋值语句：

方法1：数组遍历统一处理 #

把所有需要修改的元素存入数组，遍历执行样式修改即可，改动最小：

let a = document.querySelector(".arrow"),
    b = document.querySelector(".demo-desc1"),
    c = document.querySelector(".demo-title h3");
// 把元素放入数组后批量处理
[a, b, c].forEach(el => el && (el.style.display = "none"))

代码里加了el &&的判断逻辑，是为了避免某一个选择器没有匹配到元素时出现报错。

方法2：一次性选中所有元素 #

如果只是单次执行隐藏操作、不需要保留元素变量，可以直接拼接选择器用querySelectorAll一次性选中所有目标元素：

document.querySelectorAll(".arrow, .demo-desc1, .demo-title h3")
  .forEach(el => el.style.display = "none")

这种写法可以省掉变量声明步骤，代码更简洁。

小提示：如果后续还需要对这几个元素做其他样式/属性修改，推荐用方法1先把元素存起来，避免重复查询DOM消耗性能。

内容的提问来源于stack exchange，提问作者LandonRaymond