Wie formatiere ich Elemente mit getElementsByClassName beim Auftreten eines Ereignisses?

Ändern des Elementstils mit getElementsByClassName bei einem Ereignis

Elemente mit einer bestimmten Klasse können beim Auftreten eines Ereignisses mit der Methode getElementsByClassName gestaltet werden. Da diese Methode jedoch ein Array von Elementen zurückgibt, ist es wichtig, das Array zu durchlaufen, um den Stil auf alle übereinstimmenden Elemente anzuwenden. Darüber hinaus sind Inline-Ereignisverarbeitungsattribute wie onmouseover veraltet.

Fehler im Code

Der bereitgestellte Code weist mehrere Fehler auf:

1. Der getElementsByClassName Methodenargument fehlt. Es sollte den abzurufenden Klassennamen angeben.
2. Das ID-Attribut in „
3. Mehrere Elemente mit derselben ID sind auf der Seite vorhanden („colorswitcher B“), was den getElementById-Aufruf mehrdeutig macht.
4. Der getElementsByClassName-Aufruf wird nicht zwischengespeichert, was ineffizient sein kann, wenn mehrere Ereignisse auftreten.

Lösung

1. Verwenden Sie document.getElementsByClassName('className'), um die Sammlung übereinstimmender Elemente abzurufen.
2. Verwenden Sie addEventListener, um Ereignishandler anzuhängen.
3. Zwischenspeichern Sie das Ergebnis von getElementsByClassName aus Leistungsgründen.
4. Verwenden Sie externe CSS-Klassen anstelle von Inline-Stilattributen, um die Lesbarkeit und Wartbarkeit des Codes zu gewährleisten.

Beispiel

<code class="javascript">window.onload = function() {
  var aElements = document.getElementsByClassName('classA');
  var bElements = document.getElementsByClassName('classB');

  document.getElementById('elementA').addEventListener('mouseover', function() {
    changeColor(aElements, 'red');
  });

  document.getElementById('elementB').addEventListener('mouseover', function() {
    changeColor(bElements, 'blue');
  });

  function changeColor(elements, color) {
    for (var i = 0; i < elements.length; i++) {
      elements[i].classList.add('class-color-' + color);
    }
  }
};</code>

Das obige ist der detaillierte Inhalt vonWie formatiere ich Elemente mit getElementsByClassName beim Auftreten eines Ereignisses?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!