如何实现元素点击时颜色交替切换？网站点赞按钮开发需求

方案一：使用状态变量跟踪（推荐，稳定性高） #

通过布尔变量记录当前点赞状态，点击时根据状态切换颜色，同时翻转状态值，避免浏览器颜色格式解析差异的问题。

const btn = document.getElementById("like");
let isLiked = false; // 初始状态：未点赞

btn.addEventListener('click', function onClick() {
    btn.style.color = isLiked ? 'black' : 'crimson';
    isLiked = !isLiked; // 切换状态
});

方案二：直接判断当前颜色（需兼容浏览器颜色格式） #

直接读取按钮的style.color属性判断当前颜色，但要注意部分浏览器会将颜色名称转为RGB值返回，所以需要同时判断两种格式。

const btn = document.getElementById("like");

btn.addEventListener('click', function onClick() {
    const currentColor = btn.style.color;
    // 兼容颜色名称和RGB格式
    if (currentColor === 'crimson' || currentColor === 'rgb(220, 20, 60)') {
        btn.style.color = 'black';
    } else {
        btn.style.color = 'crimson';
    }
});

方案三：用CSS类控制（更符合项目开发规范） #

将样式逻辑放在CSS中，JS只负责切换类名，便于后期维护和扩展样式（比如添加点赞动画、图标变化等）。

CSS代码：

#like {
    color: black;
    cursor: pointer; /* 添加上手型光标提升交互体验 */
    /* 可添加其他默认样式 */
}
#like.liked {
    color: crimson;
}

JS代码：

const btn = document.getElementById("like");

btn.addEventListener('click', function onClick() {
    btn.classList.toggle('liked');
});

内容的提问来源于stack exchange，提问作者hairdye