如何用CSS实现点击元素后改变颜色

在前端页面开发中，点击元素后改变颜色是一个常见的交互需求，实现方式主要分为纯CSS方案和结合JavaScript的方案，两种方式各有适用的场景，开发者可以根据实际需求选择。

一、纯CSS实现点击变色

纯CSS实现点击变色主要依赖:active伪类选择器，该选择器会在元素被激活（比如鼠标点击的瞬间）时生效，适合实现点击瞬间的颜色反馈效果。

1. 基础实现示例

下面是一个按钮点击时改变背景色的示例：

/* 定义按钮基础样式 */
.click_btn {
    padding: 10px 20px;
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* 点击瞬间改变背景色 */
.click_btn:active {
    background-color: #337ecc;
}

对应的HTML结构如下：

<button class="click_btn">点击我变色</button>

这种方式的缺点是只在点击的瞬间生效，松开鼠标后颜色会恢复原状，无法实现点击后保持变色状态的效果。

2. 利用:target伪类实现状态保持

如果需要点击后颜色保持，可以结合:target伪类和锚点实现，不过这种方式需要元素有对应的id，且会修改页面的URL哈希值，适用场景有限：

/* 默认样式 */
.target_box {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    line-height: 100px;
    text-align: center;
}

/* 被锚点选中后的样式 */
.target_box:target {
    background-color: #67c23a;
    color: #fff;
}

<a href="#box1">点击改变颜色</a>
<div class="target_box" id="box1">目标元素</div>

二、结合JavaScript实现点击变色

如果需要更灵活的状态控制，比如点击后切换颜色、记录点击次数对应的不同颜色，就需要结合JavaScript实现，这种方式可以精准控制元素的状态和样式变化。

1. 基础切换变色示例

通过给元素添加点击事件，切换对应的类名来改变颜色：

/* 基础样式 */
.js_btn {
    padding: 10px 20px;
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

/* 点击后的样式 */
.js_btn.active {
    background-color: #f56c6c;
}

<button class="js_btn">点击切换颜色</button>
<script>
    // 获取按钮元素
    const btn = document.querySelector('.js_btn');
    // 添加点击事件监听
    btn.addEventListener('click', function() {
        // 切换active类名
        this.classList.toggle('active');
    });
</script>

2. 多次点击切换不同颜色

如果需要每次点击切换不同的颜色，可以通过数组存储颜色值，根据点击次数切换：

.multi_btn {
    padding: 10px 20px;
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

<button class="multi_btn">点击切换多种颜色</button>
<script>
    const multiBtn = document.querySelector('.multi_btn');
    // 颜色数组
    const colorList = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c'];
    // 记录点击次数
    let clickCount = 0;
    multiBtn.addEventListener('click', function() {
        // 计算当前颜色索引
        const index = clickCount % colorList.length;
        // 设置背景色
        this.style.backgroundColor = colorList[index];
        clickCount++;
    });
</script>

三、两种方案的适用场景

• 如果只需要点击瞬间的颜色反馈，比如按钮按下的反馈效果，优先选择纯CSS的:active伪类方案，实现简单且无额外性能消耗。
• 如果需要点击后保持变色状态，或者需要复杂的状态切换逻辑，比如根据点击次数切换不同颜色、和其他交互状态联动，选择JavaScript方案更合适。
• 如果页面有严格的不允许修改URL哈希值的要求，不要使用:target伪类的方案。

四、注意事项

在使用:active伪类时，需要注意在移动端可能存在触发不灵敏的问题，部分移动端浏览器需要给元素添加cursor: pointer样式才能正常触发。

使用JavaScript操作样式时，如果样式规则较多，建议通过切换类名的方式修改样式，而不是直接操作style属性，这样更便于样式的维护和复用。

如果需要在点击变色的同时添加过渡动画，可以在CSS中给对应的样式属性添加transition属性，让颜色变化更平滑。

CSS点击变色伪类选择器JavaScript前端样式修改时间：2026-06-22 05:03:58