Javascript 在现有类上附加类

Question

我在使用 classList 实现 Query Selector All 方法时遇到问题。基本上，我想要做的是将类 .purple 添加到 fridge 类的所有实例。但是，它一直告诉我它不能添加到未定义。

下面的代码片段有望说明我正在努力完成的工作。

document.querySelectorAll('.fridge').classList.add('purple');

.purple {color: purple;}

<div class="fridge">Stuff</div>
<div class="fridge">Moar Stuff</div>

编辑:我正在寻找一个简单的 JavaScript 解决方案。

Answer 1

您需要转换 NodeList从 querySelectorAll 到一个数组并循环遍历它:

Array.prototype.slice.call(document.querySelectorAll('.fridge')).forEach(function (fridge) {
  fridge.classList.add('purple');
});

.purple {
  color: purple;
}

<div class="fridge">Stuff</div>
<div class="fridge">Moar Stuff</div>

如果你能够使用 ES6，这可以缩短一点:

[...document.querySelectorAll('.fridge')].forEach((fridge) => {
  fridge.classList.add('purple');
});

.purple {
  color: purple;
}

<div class="fridge">Stuff</div>
<div class="fridge">Moar Stuff</div>