How to Dynamically Style Multiple Elements with the Same Class by Event Hovering in JavaScript?

How to Style Multiple Elements with the Same Class Using JavaScript

When working with HTML and CSS, sometimes you need to dynamically change the styling of multiple elements with the same class. In this case, the question is about using getElementsByClassName to change the background color of all elements with a given class when hovering over another page element.

The problem arises because getElementsByClassName returns a collection of elements, not a single element. To style multiple elements, you need to loop through the collection and apply the style changes to each element.

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

Another issue is that the hover event is not correctly attached to the target element. In the original code, the onmouseover event is attached to the trigger element (the one being hovered over). To change the styling of the target elements, the event should be attached to the target elements themselves.

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

Finally, it's important to note that inline event handlers like onmouseover are not recommended. Instead, you should use event listeners to attach event handlers to elements.

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

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

By using these techniques, you can dynamically change the style of multiple elements with the same class when hovering over another page element.

The above is the detailed content of How to Dynamically Style Multiple Elements with the Same Class by Event Hovering in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!