Comment modifier dynamiquement les styles CSS avec les écouteurs d'événements JavaScript ?

Comment modifier dynamiquement les styles CSS avec JavaScript

Pour modifier dynamiquement les propriétés CSS d'un élément à l'aide de JavaScript, plusieurs méthodes peuvent être utilisées. L'une des approches les plus polyvalentes consiste à utiliser la propriété de style de l'élément. Cette propriété donne accès à tous les styles en ligne définis pour l'élément.

Considérez l'extrait HTML et CSS suivant :

<div class="left">
  Hello
</div>
<div class="center">
  <div class="left1">

.left,
.right {
  margin: 10px;
  float: left;
  border: 1px solid red;
  height: 60px;
  width: 60px;
}

.left:hover,
.right:hover {
  border: 1px solid blue;
}

.center {
  float: left;
  height: 60px;
  width: 160px;
}

.center .left1,
.center .right1 {
  margin: 10px;
  float: left;
  border: 1px solid green;
  height: 60px;
  width: 58px;
}

Dans cet extrait, nous avons trois éléments (à gauche, au centre et à droite), chacun avec des classes différentes. Lorsque les éléments gauche ou droit sont survolés, ils changent la couleur de leur bordure en bleu.

Pour faire apparaître l'élément left1 lorsque gauche est survolé et right1 lorsque droite est survolé, nous pouvons utiliser JavaScript :

document.querySelector('.left').addEventListener('mouseenter', () => {
  document.querySelector('.left1').style.display = 'block';
});

document.querySelector('.left').addEventListener('mouseleave', () => {
  document.querySelector('.left1').style.display = 'none';
});

document.querySelector('.right').addEventListener('mouseenter', () => {
  document.querySelector('.right1').style.display = 'block';
});

document.querySelector('.right').addEventListener('mouseleave', () => {
  document.querySelector('.right1').style.display = 'none';
});

Dans ce code JavaScript, nous utilisons la méthode addEventListener pour attacher des écouteurs d'événements aux éléments gauche et droit pour les événements mouseenter et mouseleave. Lorsque la souris entre dans l'élément, l'élément masqué correspondant est rendu visible en changeant son style d'affichage en bloc. Lorsque la souris quitte l'élément, l'élément masqué est à nouveau masqué.

L'utilisation de la propriété style pour modifier dynamiquement les propriétés CSS vous offre une grande flexibilité pour modifier l'apparence des éléments dans vos pages Web.

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!