JS刽子手游戏问题：无法为数组设CSS属性，setAttribute失效

嘿，我刚捋了下你的问题，这俩坑在DOM操作里真的挺常见的，咱们一个个来掰明白：

问题1：无法为数组设置CSS属性 #

首先得搞清楚：数组（或是你用querySelectorAll拿到的NodeList类数组）本身不是DOM元素，你没法直接给它加CSS样式或者属性。比如你可能写了类似characters.style.visibility = 'hidden'这种代码，肯定没用——因为characters是一组元素的集合，不是单个可操作的DOM节点。

解决办法超简单：遍历集合里的每个元素，逐个操作就行。比如用forEach循环：

// 假设你拿到了所有字母对应的元素集合
const letterElements = document.querySelectorAll('.boxes');
// 遍历每个元素，添加隐藏类
letterElements.forEach(element => {
  element.classList.add('hidden');
});

这样每个DOM元素都会被单独设置样式，自然就能生效了。

问题2：setAttribute()导致代码失效，删除后无法隐藏字母 #

你碰到的这个问题，十有八九是因为setAttribute('class', 'hidden')会完全覆盖元素原有的class属性。比如你的元素本来带着boxes类（负责字体、边框这些样式），用setAttribute把class改成hidden后，boxes类直接被删掉了，元素丢失了原有样式，看起来就像“代码失效”了。

而当你删掉这行代码后，元素保留了boxes类，格式正常了，但因为没加上hidden类，visibility: hidden的规则自然也不会生效，字母没法隐藏。

正确的姿势是用classList来操作类——它不会覆盖原有类，只是添加/移除指定类：

// 给元素添加hidden类，同时保留boxes类
character.classList.add('hidden');

// 如果需要取消隐藏，就移除这个类
character.classList.remove('hidden');

这样元素既有boxes的样式，又能通过hidden类实现隐藏，俩问题一起解决。

额外小提醒 #

要是你的hidden类还是没生效，可以检查下CSS优先级：比如boxes类的样式会不会覆盖hidden的visibility？你可以把hidden类的定义放在boxes后面，或者用更明确的选择器：

.boxes {
  font-size: 1.6em;
  text-align: center;
  width: 10px;
  border-bottom: 3px solid black;
  margin: 5px;
  padding: 10px;
}
/* 放在boxes后面，确保优先级足够 */
.boxes.hidden {
  visibility: hidden;
}

这样就算元素同时有两个类，隐藏样式也能稳稳生效。

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