Question

我已经查看了有关if语句的其他主题，背景颜色作为条件;但是，还没有找到可行的答案。无论我事先创建一个元素作为变量，还是使用rgb或rgba，我都没有得到任何结果，而if直接传递给else。

var element = $("#ARCStatusBox3EQETD");
console.log($('#ARCStatusBox1EQETD').css('backgroundColor'));
    if(element.css('background-color') == "rgb(220,20,60)") {
        $('#HomeStatus1').css("background-color", "#dc143c");
    }
    else if ($('#ARCStatusBox2EQETD').css('background-color') == '#daa520' || $('#ARCStatusBox2EQETD').css('background-color') == '#daa520' || $('#ARCStatusBox1EQETD').css('background-color') == '#daa520'){
        $('#HomeStatus1').css("background-color", "#daa520");
    }
    else {// ($('#ARCStatusBox3EQETD').css('background-color') == '#7cfc00' || $('#ARCStatusBox2EQETD').css('background-color') == '#7cfc00' || $('#ARCStatusBox1EQETD').css('background-color') == '#7cfc00'){
        $('#HomeStatus1').css("background-color", "#7cfc00");
}

有我的代码，它既不适用于==十六进制代码也不适用于rgb / rgba。

非常感谢任何有关解决方案的帮助。

Answer 1

尝试

var element = $("#ARCStatusBox3EQETD");
    if(element.css('background-color') == "rgb(220, 20, 60)") {
        $('#HomeStatus1').css("background-color", "#dc143c");
    }
    else if (hexColor($('#ARCStatusBox2EQETD').css('background-color')) == '#daa520' || hexColor($('#ARCStatusBox2EQETD').css('background-color')) == '#daa520' || $('#ARCStatusBox1EQETD').css('background-color') == '#daa520'){
        $('#HomeStatus1').css("background-color", "#daa520");
    }
    else {// ($('#ARCStatusBox3EQETD').css('background-color') == '#7cfc00' || hexColor($('#ARCStatusBox2EQETD').css('background-color')) == '#7cfc00' || hexColor($('#ARCStatusBox1EQETD').css('background-color')) == '#7cfc00'){
        $('#HomeStatus1').css("background-color", "#7cfc00");
}

function hexColor(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    return '#' + parts.join('');
}

另请注意，某些浏览器会在\ s

之后返回带有空格的rgb

Answer 2

看起来这可能是特定于浏览器的：

找到here：

此外，jQuery可以同样解释CSS和DOM格式多字属性。例如，jQuery理解并返回 .css（'background-color'）和.css的正确值的CSS（ '的backgroundColor'）。不同的浏览器可能返回CSS颜色逻辑上但文本上不相等的值，例如#FFF， #ffffff和rgb（255,255,255）。

Answer 3

我不确定您是否可以比较计算颜色。我认为jQuery只提供字符串识别。计算颜色依赖于浏览器实现。

我认为你只能比较两个字符串，我不认为你可以获取一个元素的bg颜色，并且安全性依赖它正确计算。这可能是可能的，但我认为对于这样的功能，您必须扩展您的实现。

因为一个浏览器可以使用一种颜色格式，而另一种浏览器可以使用其他颜色格式，而这些格式不同字符串。

Answer 4

你的rgb字符串中的逗号之间需要空格。

'rgb(255, 255, 255)'

这是一个有效的jsfiddle http://jsfiddle.net/Pvt5Z/8/

编辑以上内容适用于FireFox和Chrome，但IE8会返回背景颜色的css字符串，而不是将其标准化为“rgb”字符串。

Answer 5

部分问题是颜色有多个字符串表示形式：

"white"
"rgb(255, 255, 255)"
"#FFFFFF"
"#FFF"

都代表白色。

为了能够比较两种颜色，您需要在同一地面上以相同的格式获得两种颜色。

jQuery.css()用于获取css颜色时，将始终返回RGB格式的颜色字符串。

您可以使用该功能比较颜色，同时始终指定要以RGB格式进行比较的颜色。

无论元素具有白色的哪种字符串表示形式，

都将返回下一条语句：

element.css("background-color") == "rgb(255, 255, 255)"

您还可以通过将element.css("background-color")转换为十六进制来将颜色值比较为十六进制。

this question的答案提供了一些将RGB颜色转换为十六进制的方法。

Answer 6

如果您有一个具有所需背景颜色的元素，则可以比较两种背景颜色。

如果（的document.getElementById（ “myCompare”）。style.backgroundColor ==的document.getElementById（ “myRef”）。style.backgroundColor）

如果声明背景颜色为条件

6 个答案: