Wie vergleiche ich Farben in JavaScript, ohne die Hintergrundfarben direkt zu vergleichen?

Wie vergleiche ich Farben in JavaScript?

Ihr Code vergleicht die Hintergrundfarbe eines Elements mit einem bestimmten Wert (#ECECF4). Dieser Ansatz wird jedoch nicht empfohlen, da er die Geschäftslogik eng mit der Präsentation verknüpft.

Erwägen Sie stattdessen, die Logik in JavaScript beizubehalten und Klassen zu verwenden, um verschiedene Zustände visuell darzustellen. Dadurch können Sie das Styling von der Geschäftslogik trennen und sicherstellen, dass die Präsentation ausschließlich über CSS erfolgt.

Sie können beispielsweise jQuery verwenden, um eine „aktive“ Klasse umzuschalten, wenn auf ein Element geklickt wird:

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

Definieren Sie dann das entsprechende CSS, um die Hintergrundfarbe aktiver Elemente zu ändern:

.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;
}

Mit diesem Ansatz können Sie die Präsentation bearbeiten, ohne sie zu ändern die Geschäftslogik, was zu saubererem und besser wartbarem Code führt.

Das obige ist der detaillierte Inhalt vonWie vergleiche ich Farben in JavaScript, ohne die Hintergrundfarben direkt zu vergleichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!