如何通过 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中文网其他相关文章！