Comment styliser des éléments avec getElementsByClassName lors de l'occurrence d'un événement ?

Modification du style d'élément avec getElementsByClassName sur un événement

Les éléments avec une classe donnée peuvent être stylisés lors de l'occurrence d'un événement à l'aide de la méthode getElementsByClassName. Cependant, puisque cette méthode renvoie un tableau d’éléments, il est essentiel de parcourir le tableau pour appliquer le style à tous les éléments correspondants. De plus, les attributs de gestion des événements en ligne comme onmouseover sont obsolètes.

Erreur dans le code

Le code fourni contient plusieurs erreurs :

1. Le getElementsByClassName l’argument de méthode est manquant. Il doit spécifier le nom de la classe à récupérer.
2. L'attribut ID dans "
3. Plusieurs éléments avec le même ID sont présents sur la page ("colorswitcher B"), rendant l'appel getElementById ambigu.
4. L'appel getElementsByClassName n'est pas mis en cache, ce qui peut être inefficace si plusieurs événements se produisent.

Solution

1. Utilisez document.getElementsByClassName('className') pour récupérer la collection d'éléments correspondants.
2. Utilisez addEventListener pour attacher des gestionnaires d'événements.
3. Mettez en cache le résultat de getElementsByClassName pour des raisons de performances.
4. Utilisez des classes CSS externes au lieu d'attributs de style en ligne pour maintenir la lisibilité et la maintenabilité du code.

Exemple

<code class="javascript">window.onload = function() {
  var aElements = document.getElementsByClassName('classA');
  var bElements = document.getElementsByClassName('classB');

  document.getElementById('elementA').addEventListener('mouseover', function() {
    changeColor(aElements, 'red');
  });

  document.getElementById('elementB').addEventListener('mouseover', function() {
    changeColor(bElements, 'blue');
  });

  function changeColor(elements, color) {
    for (var i = 0; i < elements.length; i++) {
      elements[i].classList.add('class-color-' + color);
    }
  }
};</code>

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!