实现点击元素后变更颜色有三种方法：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 实现：
立即学习“前端免费学习笔记（深入）”；
// HTML
<button id="myButton">点击变色</button>
// CSS
#myButton {
background-color: #007bff;
color: white;
}
#myButton.clicked {
background-color: green;
}
JavaScript 控制切换：
document.getElementById('myButton').addEventListener('click', function() {
this.classList.toggle('clicked');
});
点击后添加 clicked 类，颜色变为绿色，再次点击可切换回来。
3. 点击后固定变色（不切换回）
如果只想变一次，不需要来回切换：
document.getElementById('myButton').addEventListener('click', function() {
this.style.backgroundColor = 'purple';
this.style.color = 'white';
});
直接修改内联样式，简单直接，适合一次性操作。
基本上就这些方法，根据是否需要持久变色和是否允许切换来选择合适的方式。
