实现点击元素后变更颜色有三种方法：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'; });
直接修改内联样式，简单直接，适合一次性操作。
基本上就这些方法，根据是否需要持久变色和是否允许切换来选择合适的方式。