使用 getElementsByClassName 更改元素样式

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

问题诊断

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

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

解决方案

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

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 
在此更正后的代码中：
我们循环遍历 getElementsByClassName 返回的集合以更改所有匹配元素的样式。
我们使用不带空格的正确 ID来识别触发元素。
我们定义changeColor函数来将所需的颜色变化应用到elements.
附加说明
为了获得最佳性能，请考虑缓存元素集合，而不是每次都重新查询。此外，使用 CSS 类和事件侦听器进行样式更改比内联属性更有效。