css点击元素变更颜色的方法

实现点击元素后变更颜色有三种方法：1. 用:active伪类仅在按下时变色；2. 用JavaScript切换class实现点击后持久变色并可切换回；3. 直接修改内联样式实现一次性变色。

要实现点击元素后变更颜色，可以通过 CSS 结合 JavaScript 来完成。CSS 本身不能直接响应“点击”行为，但可以配合 JS 操作类名或使用 :active 伪类实现部分效果。以下是几种常用方法：

1. 使用 :active 伪类（仅按下时变色）

如果只需要在鼠标点击按住时改变颜色，可以直接用 CSS 的 :active 伪类：

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
}

.button:active {
  background-color: red;
}

这种方式只在鼠标按下期间生效，松开后恢复原样。

2. 使用 JavaScript 切换 class（点击后持久变色）

更常见的需求是点击一次后颜色永久改变，可通过 JS 添加或移除 class 实现：

立即学习“前端免费学习笔记（深入）”；

标签： css 点击元素变色 javascript java html js ssl red