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上进行了测试，并且返回的值相同，请确保我们需要确保其能在跨浏览器中正常工作

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

2 个答案: