3

我已经查看了有关以背景颜色为条件的 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。

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

4

6 回答 6

4

尝试

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('');
}​

另请注意，某些浏览器会在 , 之后返回带有空格的 rgb

于 2012-11-13T20:27:18.400 回答
1

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

在这里找到：

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

于 2012-11-13T20:29:35.367 回答
0

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

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

都代表白色。

为了能够比较两种颜色，您需要以相同的格式将两种颜色放在一个共同点上。

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

您可以使用该功能来比较颜色，方法是始终以 RGB 格式指定要与之比较的颜色。

无论元素具有哪种白色字符串表示形式，下一条语句都是正确的：

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

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

这个问题的答案提供了一些将 RGB 颜色转换为十六进制的方法。

于 2012-11-13T21:11:08.227 回答
0

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

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

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

于 2012-11-13T20:28:00.083 回答
0

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

'rgb(255, 255, 255)'

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

编辑上面将在 FireFox 和 Chrome 中工作，但是，IE8 返回背景颜色的任何 css 字符串，而不是将其规范化为“rgb”字符串。

于 2012-11-13T20:34:27.657 回答
0

如果您有一个具有您正在寻找的背景颜色的元素，您可以比较这两种背景颜色。

if(document.getElementById("myCompare").style.backgroundColor==document.getElementById("myRef").style.backgroundColor)

于 2013-10-23T17:19:30.903 回答