Question

我要求如果元素与指定颜色匹配，我必须删除元素的背景。此要求仅适用于Chrome。但如果我使用下面的代码

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

但上述代码在Chrome中无效，因为Chrome正在尝试与RGBA（）匹配这有什么办法吗？请帮帮我...

Answer 1

适用于Chrome浏览器。我将选择器更改为body *，因为我不想捕获html和标题标记等。另外，请确保在文档准备好后启动功能：

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

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

见这里：http://jsfiddle.net/jfZBB/

Answer 2

通过一些调查，似乎没有明确背景颜色的元素返回：

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

彩色物品返回时：

"rgb(171, 48, 76)"

Answer 3

这不是一项微不足道的任务，因为您需要考虑其他可能代表相同价值的颜色格式，例如：

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

此外，浏览器的行为不一致。例如，即使在CSS中使用了十六进制值，Firefox和Chrome也总是返回rgb（）字符串，但IE返回定义的CSS值。

如果您想确保定位正确的颜色，则应将其转换为通用格式，然后进行比较。

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

注意：我的toHex功能唯一不做的是考虑3位十六进制颜色格式，所以你应该稍微修改它。

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

3 个答案: