为什么第一个功能的变化有效，但第二个没有？

Question

Function 1. Works perfectly. Makes a div flicker.

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

This doesn't. I just changed number to it's hashtag value.

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

Anyone has an idea why?

Answer 1

Browsers handle colors differently. Sometimes it's HEX, sometimes it's RGBA, RGB, will this change in the future browser updates? who knows and who cares. You can store the interpreted color into a data-* attribute...

But hey, why don't we try first a pure CSS solution using animation keyframes

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

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

If you really want JS... than you could store the current background inside a data-* attribute, and than simply toggle back and forth the data and background color values:

 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> 

You can also store an array of colors:

 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

because style.backgroundColor returns the rgb value not the string value of the color.

so in the second function y will have a value like this rgb(255, 241, 35)

you can use this method to convert the results to the hex string value

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);
}

"Different browsers behave differently with color values" @Pointy

I've tested that on both chrome and safari, and it returns the same value, bus sure we need to make sure its working cross browsers