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