使用 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函數以將所需的顏色變更套用至元素。 
附加說明
為了獲得最佳效能，請考慮快取元素集合，而不是每次都重新查詢它。此外，使用 CSS 類別和事件偵聽器進行樣式變更比內聯屬性更有效。