如何将RGB颜色与RGBA颜色匹配

Question

I have a requirement that, I have to remove the background of the element if it matches with the specified color. This requirement is only for Chrome. But if i use the below code

function unhighlight() {
    $('*').each(function () {
        if($(this).css("background-color") == "rgb(0,128,128)"){
          $(this).css("background-color","");
        }
    });
}

But the above code is not working in Chrome, because the Chrome is trying to match with RGBA().
Is there any workaround for this..? Please help me on this...

Answer 1

Works for me in Chrome. I changed the selector to body * since I didn't want to capture the html and header tags etc. Also, make sure you're firing your function when the document is ready:

$(document).ready(function() { unhighlight(); });

function unhighlight() {
    $('body *').each(function () {
        if ($(this).css("background-color") == "rgb(255, 0, 0)"){
           $(this).css("background-color","");
        }
    });
}​

See here: http://jsfiddle.net/jfZBB/

Answer 2

With a little investigating, it appears that elements which don't have an explicit background colour return:

"rgba(0, 0, 0, 0)"

While coloured items return:

"rgb(171, 48, 76)"

Answer 3

This is not a trivial task, as you need to take into account other possible color formats which represent same value, ex:

rgb(0,128,128)
rgba(0, 128, 128, 1)
#008080 //hey, why not, who said your color will be always defined in rgb? 
*#fc0 //different color to show alternative format, #ffcc00 == #fc0

Also, browsers don't behave in a consistent way. For instance Firefox and Chrome always returns rgb() string even if hex value was used in CSS, however IE returns defined CSS value.

If you want to ensure that you are targeting correct colour, you should convert it to a common format and then compare.

function toHex(color)
{
    var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(color);
    return m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : color;
}

function unhighlight() {
    $('div').each(function () {
        if(toHex($(this).css("background-color")) == toHex("rgb(255,204,0)")){
          $(this).css("background-color","");
        }
    });
}

Note: The only thing my toHex function doesn't do is to take into account 3 digit hex color format, so you should slightly modify it.