如何透過 JavaScript 中的事件懸停來動態設定具有相同類別的多個元素的樣式？

如何使用JavaScript 為同一類別的多個元素設定樣式

使用HTML 和CSS 時，有時需要動態更改樣式具有相同類別的多個元素。在本例中，問題是當滑鼠懸停在另一個頁面元素上時，使用 getElementsByClassName 更改具有給定類別的所有元素的背景顏色。

出現問題是因為 getElementsByClassName 傳回元素的集合，而不是單一元素。要設定多個元素的樣式，您需要循環遍歷集合並將樣式變更套用到每個元素。

<code class="js">var elements = document.getElementsByClassName('classname');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = 'red';
}

另一個問題是懸停事件未正確附加到目標元素。在原始程式碼中， onmouseover 事件附加到觸發元素（懸停在其上的元素）。若要變更目標元素的樣式，應將事件附加到目標元素本身。

<code class="html"><th class="classname" onmouseover="changeColor(this)">Hover Here</th></code>

最後，要注意的是，不建議使用 onmouseover 等內嵌事件處理程序。相反，您應該使用事件偵聽器將事件處理程序附加到元素。

<code class="js">function changeColor(element) {
  element.style.backgroundColor = 'red';
}

document.querySelectorAll('.classname').forEach((element) => {
  element.addEventListener('mouseover', () => {
    changeColor(element);
  });
});</code>

透過使用這些技術，當滑鼠懸停在另一個頁面元素上時，您可以動態地變更具有相同類別的多個元素的樣式。

以上是如何透過 JavaScript 中的事件懸停來動態設定具有相同類別的多個元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！