Ändern von Elementstilen mit getElementsByClassName

getElementsByClassName ermöglicht Ihnen die Auswahl mehrerer Elemente mit demselben Klassennamen. 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

The 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:

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 
In diesem korrigierten Code:
Wir durchlaufen die von getElementsByClassName zurückgegebenen Sammlungen, um den Stil aller übereinstimmenden Elemente zu ändern.
Wir verwenden korrekte IDs ohne Leerzeichen um die auslösenden Elemente zu identifizieren.
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 die Sammlung von Elementen zwischenspeichern, anstatt sie jedes Mal erneut abzufragen. Darüber hinaus ist die Verwendung von CSS-Klassen und Ereignis-Listenern für Stiländerungen effizienter als Inline-Attribute.