Wie ändere ich HTML-Elementstile mithilfe von JavaScript korrekt, wenn Stile extern definiert werden?

Wie ändere ich den Stil für HTML-Elemente (extern mit CSS gestylt) mit JS?

Beim Versuch, den Stil eines HTML-Elements mit JavaScript zu ändern, kann es zu Problemen kommen Probleme. Hier ist ein Szenario, in dem Sie die Hintergrundfarbe eines

-Elements ändern möchten. Element mit der Klasse „home“ auf grün, wenn Sie auf das Element klicken. Dies funktioniert jedoch nicht wie erwartet. Lassen Sie uns die möglichen Gründe für dieses Problem untersuchen.

Der Originalcode:

function selectHome() {
  console.log("test");
  document.getElementsByClassName("home").style += "background-color:green;";
}

Problem: Verwendung von getElementsByClassName und Mutation der style-Eigenschaft

Das Problem ist auf die Verwendung von getElementsByClassName und den falschen Ansatz zum Ändern des Stils zurückzuführen. Hier ist eine Aufschlüsselung der Probleme:

1. Verwendung von getElementsByClassName: getElementsByClassName gibt eine Live-Knotenliste zurück, was bedeutet, dass sie dynamisch aktualisiert wird, wenn sich das DOM ändert. Allerdings benötigen Sie hier nur einen Verweis auf das erste passende Element, keine aktuelle Liste.
2. Mutieren der Stileigenschaft:Ändern der Stileigenschaft als String (z. B. , style = "background-color:green;") ist nicht die empfohlene Methode. Es ist fehleranfällig und kann zu unbeabsichtigten Nebenwirkungen führen.

Lösung: querySelector und Festlegen von CSS-Eigenschaften

Ein besserer Ansatz besteht darin, querySelector zu verwenden, um a abzurufen Verweis auf das erforderliche Element und ändern Sie dessen CSS-Eigenschaften direkt:

document.querySelector(".home").style.backgroundColor = "green";

Vorteile von querySelector:

• Nicht-Live-Knoten-Rückgabe: querySelector gibt einen einzelnen Knoten zurück, keine Live-Knotenliste, wodurch potenzielle Leistungsprobleme vermieden werden.
• Konsistenz: Bietet eine konsistentere und zuverlässigere Möglichkeit zur Auswahl und Änderung Elemente.

Denken Sie daran, dass es beim Ändern des Stils eines Elements die beste Vorgehensweise ist, CSS-Eigenschaften direkt festzulegen, anstatt die Stileigenschaft durch Zeichenfolgenverkettung zu ändern. Dieser Ansatz sorgt für Klarheit und vereinfacht die zukünftige Wartung.

Das obige ist der detaillierte Inhalt vonWie ändere ich HTML-Elementstile mithilfe von JavaScript korrekt, wenn Stile extern definiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!