如何正确使用 getElementsByClassName 并根据事件更改元素样式？

使用 getElementsByClassName 更改元素样式

getElementsByClassName 允许您选择具有相同类名的多个元素。在给出的示例中，代码旨在当事件发生在具有特定类名称的 div 外部时更改这些 div 的背景颜色。

问题诊断

The提供的代码有一些问题：

1. getElementsByClassName 的错误使用： 语法 getElementsByClassName() 返回匹配元素的集合，而不是单个 DOM 元素。要更改每个元素的样式，您需要循环遍历集合。
2. 无效的 HTML 语法： 元素的 ID 不能包含空格，导致您的 colorswitcher A 和 colorswitcher B ID 无效.

解决方案

要解决这些问题，您可以使用以下更正的代码：

<code class="javascript">window.onload = function() {
  var aElements = document.getElementsByClassName('a');
  var bElements = document.getElementsByClassName('b');

  document.getElementById('A').addEventListener('mouseover', function() {
    changeColor(aElements, 'red');
  });

  document.getElementById('B').addEventListener('mouseover', function() {
    changeColor(bElements, 'blue');
  });
};

function changeColor(elements, color) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = color;
  }
}</code>

在此更正的代码中：

1. 我们循环遍历 getElementsByClassName 返回的集合来更改所有匹配元素的样式。
2. 我们使用不带空格的正确 ID 来标识触发元素。
3. 我们定义changeColor函数来将所需的颜色更改应用于元素。

附加说明

为了获得最佳性能，请考虑缓存元素集合而不是每次都重新查询。此外，使用 CSS 类和事件侦听器进行样式更改比内联属性更有效。

以上是如何正确使用 getElementsByClassName 并根据事件更改元素样式？的详细内容。更多信息请关注PHP中文网其他相关文章！