Comment styliser dynamiquement plusieurs éléments avec la même classe par survol d'événements en JavaScript ?

Comment styliser plusieurs éléments avec la même classe à l'aide de JavaScript

Lorsque vous travaillez avec HTML et CSS, vous devez parfois modifier dynamiquement le style de plusieurs éléments avec la même classe. Dans ce cas, la question concerne l'utilisation de getElementsByClassName pour changer la couleur d'arrière-plan de tous les éléments d'une classe donnée lorsque vous survolez un autre élément de page.

Le problème se pose car getElementsByClassName renvoie une collection d'éléments, pas un seul élément. . Pour styliser plusieurs éléments, vous devez parcourir la collection et appliquer les modifications de style à chaque élément.

<code class="js">var elements = document.getElementsByClassName('classname');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = 'red';
}

Un autre problème est que l'événement de survol n'est pas correctement attaché à l'élément cible. Dans le code d'origine, l'événement onmouseover est attaché à l'élément déclencheur (celui survolé). Pour modifier le style des éléments cibles, l'événement doit être attaché aux éléments cibles eux-mêmes.

<code class="html"><th class="classname" onmouseover="changeColor(this)">Hover Here</th></code>

Enfin, il est important de noter que les gestionnaires d'événements en ligne comme onmouseover ne sont pas recommandés. Au lieu de cela, vous devez utiliser des écouteurs d'événements pour attacher des gestionnaires d'événements aux éléments.

<code class="js">function changeColor(element) {
  element.style.backgroundColor = 'red';
}

document.querySelectorAll('.classname').forEach((element) => {
  element.addEventListener('mouseover', () => {
    changeColor(element);
  });
});</code>

En utilisant ces techniques, vous pouvez modifier dynamiquement le style de plusieurs éléments avec la même classe lorsque vous survolez un autre élément de page.

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!