Wie verwende ich getElementsByClassName richtig und ändere Elementstile basierend auf Ereignissen?

Elementstile mit getElementsByClassName ändern

mit getElementsByClassName können Sie mehrere Elemente mit demselben Klassennamen auswählen. Im angegebenen Beispiel zielt der Code darauf ab, die Hintergrundfarbe aller Divs mit einem bestimmten Klassennamen zu ändern, wenn ein Ereignis außerhalb dieser Divs auftritt.

Problemdiagnose

Die Der bereitgestellte Code weist einige Probleme auf:

1. Falsche Verwendung von getElementsByClassName: Die Syntax getElementsByClassName() gibt eine Sammlung übereinstimmender Elemente zurück, kein einzelnes DOM-Element. Um den Stil jedes Elements zu ändern, müssen Sie die Sammlung durchlaufen.
2. Ungültige HTML-Syntax: Die ID eines Elements darf keine Leerzeichen enthalten, wodurch Ihre Colorswitcher A- und Colorswitcher B-IDs ungültig werden .

Lösung

Um diese Probleme zu beheben, können Sie den folgenden korrigierten Code verwenden:

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

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

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

function changeColor(elements, color) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = color;
  }
}</code>

In diesem korrigierten Code:

1. Wir durchlaufen die von getElementsByClassName zurückgegebenen Sammlungen, um den Stil aller übereinstimmenden Elemente zu ändern.
2. Wir verwenden korrekte IDs ohne Leerzeichen, um die auslösenden Elemente zu identifizieren.
3. Wir definieren die Funktion „changeColor“, um die gewünschte Farbänderung auf die Elemente anzuwenden.

Zusätzliche Hinweise

Für eine optimale Leistung sollten Sie stattdessen die Sammlung von Elementen zwischenspeichern jedes Mal erneut abfragen. Darüber hinaus ist die Verwendung von CSS-Klassen und Ereignis-Listenern für Stiländerungen effizienter als Inline-Attribute.

Das obige ist der detaillierte Inhalt vonWie verwende ich getElementsByClassName richtig und ändere Elementstile basierend auf Ereignissen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!