Menu
Coddy logo textTech

getElementsByClassName

Lektion 5 von 13 im Kurs JavaScript DOM-Methoden von Coddy.

Die Funktion getElementsByClassName() gibt ein Array aller Elemente mit einem übereinstimmenden Klassenattribut zurück, was nützlich ist, um mehrere Elemente auszuwählen, die denselben Stil oder dasselbe Verhalten teilen. Zum Beispiel:

const elements = document.getElementsByClassName("className");

Das Obige ruft die Elemente mit der Klasse className ab und speichert sie in einer Variable namens elements.

Wir müssen über diese Variable iterieren, um die Eigenschaften aller ähnlichen Elemente zu ändern, zum Beispiel:

for (const element of elements) {
	className.style.color = "blue";
	className.style.fontWeight = "bolder";
}
challenge icon

Aufgabe

Einfach

Ihnen wird HTML-Code gegeben, der Absätze mit dem Klassennamen highlight enthält.

Verwenden Sie ausschließlich JavaScript, um die Farbe und die Schriftstärke des Textes zu ändern:

  1. Rufen Sie die Elemente mit der Funktion getElementsByClassName() ab.
  2. Iterieren Sie über diese abgerufene Elementvariable mit einer for-Schleife.
  3. Ändern Sie für jedes Element im Array die color zu “orange” und das fontWeight zu “bold” unter Verwendung der style-Eigenschaft.

Sie müssen die Webseite aktualisieren, um die Änderungen zu sehen:

Vorschau der Änderungen

Probier es selbst

<!DOCTYPE html>
<html>
    <body>
        <p class="highlight">Text 1</p>
        <p class="highlight">Text 2</p>
        <script src="script.js"></script>
    </body>
</html>

Alle Lektionen in JavaScript DOM-Methoden