javascript - 为什么函数的第一个变体起作用而第二个变体不起作用？

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

浏览器处理颜色的方式不同。有时是HEX，有时是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>