Wie kann ich mehrere Elemente mit derselben Klasse dynamisch formatieren, indem ich ein Ereignis in JavaScript schweben lasse?

So formatieren Sie mehrere Elemente mit derselben Klasse mithilfe von JavaScript

Bei der Arbeit mit HTML und CSS müssen Sie manchmal den Stil dynamisch ändern aus mehreren Elementen derselben Klasse. In diesem Fall geht es um die Verwendung von getElementsByClassName, um die Hintergrundfarbe aller Elemente mit einer bestimmten Klasse zu ändern, wenn Sie mit der Maus über ein anderes Seitenelement fahren.

Das Problem entsteht, weil getElementsByClassName eine Sammlung von Elementen zurückgibt, nicht ein einzelnes Element . Um mehrere Elemente zu formatieren, müssen Sie die Sammlung durchlaufen und die Stiländerungen auf jedes Element anwenden.

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

Ein weiteres Problem besteht darin, dass das Hover-Ereignis nicht korrekt an das Zielelement angehängt ist. Im Originalcode ist das onmouseover-Ereignis an das Triggerelement angehängt (das Element, über das der Mauszeiger bewegt wird). Um den Stil der Zielelemente zu ändern, sollte das Ereignis an die Zielelemente selbst angehängt werden.

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

Abschließend ist es wichtig zu beachten, dass Inline-Ereignishandler wie onmouseover nicht empfohlen werden. Stattdessen sollten Sie Ereignis-Listener verwenden, um Ereignishandler an Elemente anzuhängen.

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

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

Mithilfe dieser Techniken können Sie den Stil mehrerer Elemente mit derselben Klasse dynamisch ändern, wenn Sie mit der Maus über ein anderes Seitenelement fahren.

Das obige ist der detaillierte Inhalt vonWie kann ich mehrere Elemente mit derselben Klasse dynamisch formatieren, indem ich ein Ereignis in JavaScript schweben lasse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!