Javascript 为什么函数的第一种变体有效，而第二种变体无效'；T

职能1。工作完美。使div闪烁

function makeItFlicker(){
        let y = document.getElementById(x).style.backgroundColor;
        if (y=="blue"){
            document.getElementById(x).style.backgroundColor = "#557a95";
        }
        else {
            document.getElementById(x).style.backgroundColor = "blue";
        }
    }
    setInterval(makeItFlicker, 500);

这不是。我刚把数字改成了它的标签值

function makeItFlicker(){
        let y = document.getElementById(x).style.backgroundColor;
        if (y=="#90acc0"){
            document.getElementById(x).style.backgroundColor = "#557a95";
        }
        else {
            document.getElementById(x).style.backgroundColor = "#90acc0";
        }
    }
    setInterval(makeItFlicker, 500);

---

有人知道为什么吗？

因为

style.backgroundColor

返回rgb值而不是颜色的字符串值

因此，在第二个函数中，y的值如下

rgb（255241,35）

可以使用此方法将结果转换为十六进制字符串值

function rgbToHex(str) {
    let values = str.replace('rgb(', '').replace(')', '').split(',');
    let r = values[0], g = values[1], b = values[2];
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

函数rgbToHex（str）{
让value=str.replace（'rgb（'，''）.replace（'），''）.split（'，'）；
设r=值[0]，g=值[1]，b=值[2]；
返回“#”+（（1浏览器处理颜色的方式不同。有时是十六进制，有时是RGBA，RGB，这会在未来的浏览器更新中发生变化吗？谁知道，谁在乎。您可以将解释的颜色存储到
数据-*
属性中

但是，我们为什么不先尝试使用动画关键帧的纯CSS解决方案呢


#x{
填充：50px；
背景：蓝色；
动画：闪烁0.5s无限；
}
@关键帧闪烁{
致{背景：#557a95；}
}
那么字符串
蓝色“
与字符串
”不同
…JavaScript不知道您在比较颜色。一般来说，您不能依靠浏览器以任何特定格式报告颜色值。您的意思是什么？它只是一个字符串，应该有什么东西阻止它工作。因为浏览器会将文本转换为它所代表的颜色，所以当再次调用该函数时，y设置为“rgb（85122149）”您最好使用CSS规则控制颜色，并打开和关闭一个类。不同的浏览器在颜色值上的行为不同。@Pointy这是正确的，但在这一点上这是正确的答案。他可能会更好地解释这一点，但可以肯定这是主题PosterI的问题。我已经在chrome和safari上测试了这一点，它是returns同样的值，bus sure我们需要确保它能跨浏览器工作，谢谢：）@messerbill sure，同意这是一个漂亮的解决方案，但并不是这个问题的真正答案