在 JS 中更改具有特定类的所有元素的样式

Change a style of all Elements with specific Class using JS

要更改具有特定类的所有元素的样式：

使用该querySelectorAll()方法获取具有特定类的元素的集合。
使用该forEach()方法遍历集合。
在每次迭代中，使用该style对象来更改元素的样式。

这是示例的 HTML。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />

    <style>
      .box {
        background-color: salmon;
        color: white;
        width: 150px;
        height: 150px;
        margin: 10px;
      }
    </style>
  </head>

  <body>
    <div class="box">Box content 1</div>
    <div class="box">Box content 2</div>
    <div class="box">Box content 3</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.style.backgroundColor = 'purple';
  box.style.width = '300px';
});

我们使用document.querySelectorAll
方法选择所有类为的 DOM 元素box。

该querySelectorAll方法返回一个NodeList 包含与选择器匹配的元素的。

我们传递给NodeList.forEach方法的函数

会针对NodeList.

在每次迭代中，我们在元素的style 对象上设置属性以更新其样式。

索引.js


const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.style.backgroundColor = 'purple';
  box.style.width = '300px';
});

请注意，在对象上访问时，多词属性如background color驼峰式style。

使用 getElementsByClassName 更改具有特定类的所有元素的样式

您还可以使用
document.getElementsByClassName
方法来选择具有特定类的元素。

但是，该方法返回一个HTMLCollection.

确保HTMLCollection在调用该方法之前将转换为数组
forEach()。

索引.js


const boxes = Array.from(
  document.getElementsByClassName('box')
);

boxes.forEach(box => {
  box.style.backgroundColor = 'purple';
  box.style.width = '300px';
});

代码片段通过使用该
getElementsByClassName()方法实现了相同的结果。

在调用该方法之前，我们使用Array.from方法将转换HTMLCollection为数组forEach。

如果我打开我的浏览器，我可以看到内联样式已经成功地应用到类为box.

应用于具有类的元素的样式

或者，您可以直接迭代 HTMLCollection，而无需使用循环将其转换为数组for...of。

索引.js


const boxes = document.getElementsByClassName('box');

for (const box of boxes) {
  box.style.backgroundColor = 'purple';
  box.style.width = '300px';
}

for …of语句用于循环遍历可迭代对象，如数组、字符串Map、Set和
NodeList对象generators。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：