使用 DOM 设置多个 CSS

当我们想要对一个网页中的多个元素进行相同的 CSS 样式设置时，手动逐个设置 CSS 样式将变得非常繁琐。这时我们可以使用 JavaScript 中的 DOM（Document Object Model）来批量设置 CSS 样式。

获取元素

首先，我们需要获取需要进行批量修改的元素。这可以使用 document.querySelectorAll 方法来实现，该方法会返回一个包含所有符合传入 CSS 选择器的元素的 NodeList。例如，以下代码可以获取一个页面中所有的 div 元素：

const elements = document.querySelectorAll('div');

批量设置 CSS 样式

如果我们想要对元素进行多个 CSS 样式的设置，我们可以使用元素的 style 属性直接设置。例如，以下代码可以将所有 div 元素的背景色设置为红色，字体颜色设置为白色，字体大小设置为 20px：

const elements = document.querySelectorAll('div');
elements.forEach(element => {
  element.style.backgroundColor = 'red';
  element.style.color = 'white';
  element.style.fontSize = '20px';
});

以上代码中，我们首先获取了所有的 div 元素，并使用 forEach 方法遍历 NodeList。每个元素都会依次执行里面的代码块，即把 backgroundColor、color、fontSize 属性设置为对应的值。

使用 class

如果我们希望应用一个可以复用的 CSS 样式，那么我们可以使用 class。首先，在 CSS 中定义一个 class：

.my-class {
  background-color: red;
  color: white;
  font-size: 20px;
}

然后，使用 classList 属性将 class 添加到元素中：

const elements = document.querySelectorAll('div');
elements.forEach(element => {
  element.classList.add('my-class');
});

这样，所有的 div 元素就会应用 .my-class 中的样式。如果需要删除 class，也可以使用 classList.remove 方法。

总结

使用 DOM 可以方便地批量设置 CSS 样式，减少手动修改的繁琐工作。同时，使用 class 的方法可以提高代码复用性，使代码更易于维护。