CSS 通过getElementsByClassName改变元素在事件发生时的样式

在本文中，我们将介绍如何使用CSS的getElementsByClassName方法来在事件发生时改变元素的样式。

阅读更多：CSS 教程

1. 什么是getElementsByClassName方法

getElementsByClassName是一个CSS的方法，用于查找文档中所有具有指定类名的元素。这个方法返回一个包含所有匹配元素的集合，可以通过索引或循环来访问这些元素。通过getElementsByClassName方法，我们可以获取一组元素，并对它们进行统一的样式改变。

2. 使用getElementsByClassName方法改变样式

首先我们需要在HTML中定义一些具有相同类名的元素，以便通过getElementsByClassName方法获取它们。下面是一个示例：

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

接下来，我们可以通过JavaScript来添加一个事件监听器，并在事件发生时改变元素的样式。下面是一个使用getElementsByClassName方法来改变元素背景颜色的示例：

document.addEventListener('click', function(event) {
  var boxes = document.getElementsByClassName('box');
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].style.backgroundColor = 'red';
  }
});

在上面的代码中，我们首先通过getElementsByClassName获取所有具有box类名的元素，并将它们存储在一个变量boxes中。然后，我们通过循环遍历boxes中的每个元素，并使用style属性来改变它们的背景颜色为红色。

3. 示例：鼠标悬停时改变样式

除了点击事件之外，我们也可以在其他事件发生时使用getElementsByClassName来改变元素样式。下面是一个示例，当鼠标悬停在具有box类名的元素上时，改变它们的背景颜色：

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

for (var i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener('mouseover', function(event) {
    this.style.backgroundColor = 'blue';
  });

  boxes[i].addEventListener('mouseout', function(event) {
    this.style.backgroundColor = 'white';
  });
}

在上述代码中，我们通过循环遍历获取到的具有box类名的元素，并分别给每个元素添加了鼠标悬停事件的监听器。当鼠标悬停时，元素的背景颜色将被改变为蓝色，当鼠标移出时，元素的背景颜色将被改变回白色。