Comment comparer les couleurs en JavaScript sans comparer directement les couleurs d'arrière-plan ?

Comment comparer les couleurs en JavaScript ?

Votre code compare la couleur de fond d'un élément à une valeur spécifique (#ECECF4). Cependant, cette approche n'est pas recommandée car elle associe étroitement la logique métier à la présentation.

Envisagez plutôt de conserver la logique en JavaScript et d'utiliser des classes pour représenter visuellement différents états. Cela vous permet de séparer le style de la logique métier et de garantir que la présentation est gérée uniquement par CSS.

Par exemple, vous pouvez utiliser jQuery pour basculer vers une classe « active » lorsqu'un élément est cliqué :

$(".list").on("click", "li", function() {
  $(this).toggleClass('active');
});

Ensuite, définissez le CSS correspondant pour changer la couleur de fond des éléments actifs :

.list {
  width: 100%;
  padding: 0;
}
.list li {
  padding: 5px 10px;
  list-style: none;
  cursor: pointer;
}
.list li:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.list li.active {
  background-color: #eeeecc;
}

Cette approche permet de manipuler la présentation sans modifier la logique métier, conduisant à un code plus propre et plus maintenable.

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!