Leçon 5 sur 13 du cours Méthodes DOM en JavaScript de Coddy.
La fonction getElementsByClassName() retourne un tableau de tous les éléments ayant un attribut de classe correspondant, ce qui est utile pour sélectionner plusieurs éléments qui partagent le même style ou comportement. Par exemple :
const elements = document.getElementsByClassName("className");
Le code ci-dessus récupère les éléments ayant une classe className et les enregistre dans une variable nommée elements.
Nous devons itérer sur cette variable pour modifier les propriétés de tous les éléments similaires, par exemple :
for (const element of elements) {
className.style.color = "blue";
className.style.fontWeight = "bolder";
}
Défi
Facile
On vous donne un code HTML qui contient des paragraphes avec un nom de classe highlight.
En utilisant uniquement JavaScript, modifiez la couleur et l'épaisseur de la police du texte :
Récupérez les éléments en utilisant la fonction getElementsByClassName().
Parcourez cette variable d'éléments récupérés en utilisant une boucle for.
Modifiez la color en “orange” et le fontWeight en “bold” en utilisant la propriété style, pour chaque élément du tableau.
Vous devrez rafraîchir la page web pour voir les changements :
