Comment utiliser correctement getElementsByClassName et modifier les styles d'éléments en fonction des événements ?

Modification des styles d'éléments à l'aide de getElementsByClassName

getElementsByClassName vous permet de sélectionner plusieurs éléments avec le même nom de classe. Dans l'exemple donné, le code vise à changer la couleur d'arrière-plan de tous les divs avec un nom de classe spécifique lorsqu'un événement se produit en dehors de ces divs.

Diagnostic du problème

Le le code fourni présente quelques problèmes :

1. Utilisation incorrecte de getElementsByClassName : La syntaxe getElementsByClassName() renvoie une collection d'éléments correspondants, pas un seul élément DOM. Pour modifier le style de chaque élément, vous devez parcourir la collection.
2. Syntaxe HTML invalide : L'ID d'un élément ne peut pas contenir d'espaces, ce qui rend vos ID colorswitcher A et colorswitcher B invalides .

Solution

Pour résoudre ces problèmes, vous pouvez utiliser le code corrigé suivant :

<code class="javascript">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 < elements.length; i++) {
    elements[i].style.backgroundColor = color;
  }
}</code>

Dans ce code corrigé :

1. Nous parcourons les collections renvoyées par getElementsByClassName pour modifier le style de tous les éléments correspondants.
2. Nous utilisons des identifiants corrects sans espaces pour identifier les éléments déclencheurs.
3. Nous définissons la fonction changeColor pour appliquer le changement de couleur souhaité aux éléments.

Notes supplémentaires

Pour des performances optimales, envisagez de mettre en cache la collection d'éléments au lieu de en le réinterrogeant à chaque fois. De plus, l'utilisation de classes CSS et d'écouteurs d'événements pour les changements de style est plus efficace que les attributs en ligne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!