Wie kann ich Stile extern gestalteter HTML-Elemente mit JavaScript effizient ändern?

Stileigenschaften von extern gestalteten HTML-Elementen mit JavaScript ändern

Beim dynamischen Anpassen des Erscheinungsbilds von HTML-Elementen mit JavaScript kann es erforderlich sein, dies zu tun Stileigenschaften ändern, die ursprünglich in externen CSS-Stylesheets definiert sind. Dies ist zwar mit der Methode document.getElementsByClassName() möglich, bringt jedoch Nachteile mit sich.

Nachteile der Verwendung von getElementsByClassName()

• Gibt Live-Knotenlisten zurück: getElementsByClassName() erzeugt eine Live-Knotenliste, deren Inhalt basierend auf dem DOM ständig aktualisiert wird Mutationen, die für den Zugriff auf einzelne Elemente oder große Listen von Elementen ineffizient sein können.
• Anfällig für unnötige Suche: Auch wenn nur am ersten Element interessiert ist, iteriert die Methode durch den DOM um alle passenden Elemente zu finden, nur um die meisten davon zu verwerfen.

A Better Alternative: querySelector()

Um Stileigenschaften extern gestalteter HTML-Elemente effizient und zuverlässig zu ändern, wird empfohlen, stattdessen die Methode querySelector() zu verwenden. querySelector() durchsucht das DOM nach dem ersten Element, das einem angegebenen Selektor entspricht, und gibt einen Verweis auf dieses Element zurück. Wenn kein passendes Element gefunden wird, wird undefiniert zurückgegeben.

Beispielmodifikation

Um die Farbe des

Um ein Element mit der Klasse „home“ beim Klicken auf Grün umzustellen, können Sie den folgenden Code verwenden:

const homeElement = document.querySelector(".home");
homeElement.style.color = "green";

Dieser Code ruft sicher das erste Element mit der Klasse „home“ ab und ändert direkt seine Farbeigenschaft ohne das Notwendigkeit einer Live-Knotenliste.

Das obige ist der detaillierte Inhalt vonWie kann ich Stile extern gestalteter HTML-Elemente mit JavaScript effizient ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!