以背景色为条件的 if 语句答案

【问题标题】：If statement with background color as condition以背景色为条件的 if 语句
【发布时间】：2012-11-02 07:42:01
【问题描述】：

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

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

【问题讨论】：

您是否尝试过提醒某些值？ console.log($('#ARCStatusBox1EQETD').css('backgroundColor')); 的输出是什么？ ?
您可能会喜欢这个答案：stackoverflow.com/questions/5999209/…
你几乎肯定做错了什么。行为和表现应该取决于状态。根据表现做出决定是错误的。在您根据另一种颜色确定一种颜色的特定情况下，您可能应该简单地同时确定两种颜色。

标签： javascript jquery html css

【解决方案1】：

如果你有一个元素的背景颜色是你要找的，你可以比较这两种背景颜色。

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

【讨论】：

【解决方案2】：

部分问题在于颜色有多个字符串表示：

"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 颜色转换为十六进制的方法。

【讨论】：

【解决方案3】：

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

'rgb(255, 255, 255)'

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

编辑以上内容在 FireFox 和 Chrome 中有效，但是，IE8 返回背景颜色的任何 css 字符串，而不是将其标准化为 'rgb' 字符串。

【讨论】：

显然 Chrome 也将 rbga(255,255,255,1) 转换为 rgb(255,255,255)。见这里：jsfiddle.net/Pvt5Z/10

【解决方案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('');
}

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

【讨论】：

【解决方案5】：

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

找到here:

另外，jQuery 可以平等地解释 CSS 和 DOM 格式多字属性。比如jQuery理解并返回 .css('background-color') 和 .css（'背景颜色'）。不同的浏览器可能会返回 CSS 颜色逻辑上但文本上不相等的值，例如#FFF， #ffffff 和 rgb(255,255,255)。

【讨论】：

那么，我应该使用什么格式？我同时使用 chrome 和 IE，并使用 6 dig 十六进制格式，以及 rgb 和 rgba 格式，除了 else 语句，我什么都没有。
我认为其他一些人已经击败了我，但是您必须接受响应并将其规范化为具有固定格式的字符串以进行 jquery/javascript 比较。然后你可以对该比较采取行动。标准化颜色字符串的函数将简单地检测它是什么类型的输入并采取相应的行动。

【解决方案6】：

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

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

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

【讨论】：