如何用JavaScript按钮实现文本颜色切换？现有代码无法运行求解决

为什么你的代码不生效？ #

直接用element.style.color判断颜色会踩坑：浏览器会把内联的十六进制颜色（比如#000000）转换成RGB格式（比如rgb(0, 0, 0)）返回，导致你的判断条件永远匹配不上，自然触发不了颜色切换逻辑。

修复方案（两种可选） #

方案1：获取计算后的样式值判断

用getComputedStyle拿到元素最终渲染的颜色，兼容浏览器的格式转换：

function changecolor() {
    let cc = document.getElementById('font');
    let btn = document.getElementById('btn2');
    // 获取元素实际渲染的颜色
    const currentColor = window.getComputedStyle(cc).color;

    // 同时兼容RGB和十六进制格式的判断
    if (currentColor === 'rgb(0, 0, 0)' || currentColor === '#000000') {
        cc.style.color = '#ff0000';
        btn.textContent = 'Black'; 
    } else if (currentColor === 'rgb(255, 0, 0)' || currentColor === '#ff0000') {
        cc.style.color = '#000000';
        btn.textContent = 'Red';
    }
}

方案2：用类名切换（更推荐）

放弃直接操作样式，通过类名控制颜色，代码更简洁易维护：
首先修改HTML，给文本添加默认类：

<p id="font" class="text-black" style="font-size: 25px;">Lorem Ipsum</p>
<button type="button" id="btn2" onclick="changecolor()">Red</button>

然后添加CSS样式：

.text-black {
    color: #000000;
}
.text-red {
    color: #ff0000;
}

最后修改JavaScript逻辑：

function changecolor() {
    let cc = document.getElementById('font');
    let btn = document.getElementById('btn2');
    
    if (cc.classList.contains('text-black')) {
        cc.classList.replace('text-black', 'text-red');
        btn.textContent = 'Black';
    } else {
        cc.classList.replace('text-red', 'text-black');
        btn.textContent = 'Red';
    }
}

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