如何在 JavaScript 中比较颜色而不直接比较背景颜色？

如何在 JavaScript 中比较颜色？

您的代码将元素的背景颜色与特定值 (#ECECF4) 进行比较。但是，不建议使用这种方法，因为它将业务逻辑与表示紧密耦合。

相反，请考虑将逻辑保留在 JavaScript 中并使用类来直观地表示不同的状态。这允许您将样式与业务逻辑分开，并确保演示文稿仅由 CSS 处理。

例如，您可以使用 jQuery 在单击元素时切换“活动”类：

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

然后，定义相应的 CSS 来更改活动元素的背景颜色：

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

这种方法允许您在不修改业务逻辑的情况下操作演示，从而导致更干净和更多可维护的代码。

以上是如何在 JavaScript 中比较颜色而不直接比较背景颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！