如何正確使用 getElementsByClassName 並根據事件更改元素樣式？

使用 getElementsByClassName 更改元素樣式

getElementsByClassName 允許您選擇具有相同類別名稱的多個元素。在給出的範例中，程式碼旨在當事件發生在具有特定類別名稱的 div 外部時更改這些 div 的背景顏色。

問題診斷

The提供的程式碼有一些問題：

1. getElementsByClassName 的錯誤使用：
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>

在此修正的程式碼中：

我們循環遍歷getElementsByClassName傳回的集合來變更所有符合元素的樣式。
1. 我們使用不帶空格的正確 ID 來識別觸發元素。
2. 我們定義changeColor函數來將所需的顏色變更套用至元素。

附加說明

為了獲得最佳效能，請考慮快取元素集合而不是每次都重新查詢。此外，使用 CSS 類別和事件偵聽器進行樣式變更比內聯屬性更有效。

以上是如何正確使用 getElementsByClassName 並根據事件更改元素樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！