为什么函数的第一个变体有效，而第二个变体不起作用？

Question

函数 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);

有人知道为什么吗？

Answer 1

浏览器处理颜色的方式不同。有时是十六进制，有时是RGBA，RGB，这在将来的浏览器更新中会改变吗？谁知道，谁在乎。您可以将解释的颜色存储到data-*属性中...

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

#x {
  padding: 50px;
  background: blue;
  animation: blink 0.5s infinite;
}
@keyframes blink {
  to {background: #557a95;}
}

<div id="x"></div>

如果你真的想要JS...而不是将当前背景存储在data-*属性中，而不是简单地来回切换数据和背景颜色值：

const blinkBackground = el => {
  const blink = el.getAttribute('data-blink');        // get current data...
  el.setAttribute('data-blink', el.style.background); // (store current bg value)
  el.style.background = blink;                        // ...and set it as background
}
document.querySelectorAll('[data-blink]').forEach(el =>
   setInterval(blinkBackground.bind(null, el), 500)
);

[data-blink] {padding: 10px; margin: 10px; background: blue;}

<div data-blink="#557a95"></div>
<div data-blink="red"></div>
<div data-blink="hsla(100, 50%, 80%, 0.8)"></div>

您还可以存储颜色数组：

const blinkBackground = el => {
  const c = JSON.parse(el.getAttribute('data-blink'));
  el.style.background = c[0];
  el.setAttribute('data-blink', JSON.stringify(c.reverse()));
}
document.querySelectorAll('[data-blink]').forEach(el =>
   setInterval(blinkBackground.bind(null, el), 500)
);

[data-blink] {padding: 10px; margin: 10px;}

<div data-blink='["#557a95", "blue"]'></div>
<div data-blink='["rgb(0,0,0)", "gold"]'></div>
<div data-blink='["orange", "hsla(100, 50%, 80%, 0.8)"]'></div>

Answer 2

因为style.backgroundColor返回 RGB 值而不是颜色的字符串值。

所以在第二个函数中，y 将具有这样的值rgb(255, 241, 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);
}

"不同的浏览器对颜色值的行为不同"@Pointy

我已经在 chrome 和 safari 上进行了测试，它返回相同的值，总线确保我们需要确保它跨浏览器工作