如何使用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中文網其他相關文章!