JavaScript中能否通过数组存储的按钮名修改对应按钮样式？

我通过如下数组声明存储按钮名称，同时完成了各DOM元素的查询获取：

var buttons = [
  'button1',
  'button2',
  'button3',
  'button4',
  'button5',
  'button6',
];
let button = document.querySelector(".buttonstart");
let maintext = document.querySelector(".elementialText");
let button1 = document.querySelector(".button1");
let button2 = document.querySelector(".button2");
let button3 = document.querySelector(".button3");
let button4 = document.querySelector(".button4");
let buttoncontinue = document.querySelector(".buttoncontinue");
let button5 = document.querySelector('.button5');
let button6 = document.querySelector('.button6');

我尝试通过如下循环代码批量修改按钮样式：

for (let i = 0; i < buttons.length; i++) {
    (buttons[i]).style.display = 'block';
};

上述代码运行后未生效，请问我是否可以基于数组中存储的参数，通过调用.style.display属性修改对应按钮的样式？

代码不生效的核心原因是：buttons数组中存储的是字符串类型的按钮名称，不是你之前通过querySelector获取到的DOM元素对象。字符串本身不存在style属性，直接对字符串调用.style会触发类型错误，自然无法修改样式。
你单独声明的button1~button6变量是独立的DOM引用，和数组里存储的同名字符串没有绑定关系，不会因为字符串内容和变量名一致就自动关联到对应的DOM对象。

你完全可以基于数组批量操作按钮样式，选以下任意一种方案调整即可：

• 方案1：数组直接存储DOM元素，而非字符串
  声明数组时直接把查询到的DOM对象存入数组，后续循环可以直接操作：

  // 数组内直接存DOM元素引用
  const buttons = [
    document.querySelector(".button1"),
    document.querySelector(".button2"),
    document.querySelector(".button3"),
    document.querySelector(".button4"),
    document.querySelector(".button5"),
    document.querySelector(".button6"),
  ];
  // 循环直接修改样式
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].style.display = 'block';
  }
  

• 方案2：保留字符串存储逻辑，循环内通过字符串查询对应DOM
  数组中存储按钮的类名片段，循环时拼接选择器实时查询DOM再修改样式：

  const buttons = [
    'button1',
    'button2',
    'button3',
    'button4',
    'button5',
    'button6',
  ];
  for (let i = 0; i < buttons.length; i++) {
    // 拼接类选择器，查询到对应DOM后修改样式
    document.querySelector(`.${buttons[i]}`).style.display = 'block';
  }
  

注意：不要尝试通过window[buttons[i]]的方式访问你之前声明的DOM变量，这种写法依赖变量的全局作用域特性，在局部作用域下会失效，维护性很差，不推荐使用。

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