javascript 以背景色为条件的 if 语句
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13368179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
If statement with background color as condition
提问by Deprecated
I have looked at other topics regarding if statements with background colors as conditions; however, have not found a viable answer. Whether I create an element as a variable beforehand, or use rgb or rgba, I get no results, and the if passes through straight to the else.
我已经查看了有关以背景颜色作为条件的 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");
}
There is my code, it works neither as == hex code or rgb/rgba.
有我的代码，它既不能用作 == 十六进制代码，也不能用作 rgb/rgba。
Any help with a solution is greatly appreciated.
非常感谢任何有关解决方案的帮助。
回答by Bot
Try
尝试
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('');
}?
Also note some browsers will return the rgb with spaces after the ,'s
另请注意，某些浏览器会在 , 后返回带有空格的 rgb
回答by airyt
Looks like this could be browser-specific:
看起来这可能是特定于浏览器的：
Found here:
在这里找到：
Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css('background-color') and .css('backgroundColor'). Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF,
#ffffff, and rgb(255,255,255).
此外，jQuery 可以同等地解释多字属性的 CSS 和 DOM 格式。例如，jQuery 理解并返回 .css('background-color') 和 .css('backgroundColor') 的正确值。不同的浏览器可能会返回逻辑上但文本上不相等的 CSS 颜色值，例如 #FFF
#ffffff、 和 rgb(255,255,255)。
回答by Louis Ricci
You need spaces between the commas in your rgb string.
rgb 字符串中的逗号之间需要空格。
'rgb(255, 255, 255)'
Here's a working jsfiddle http://jsfiddle.net/Pvt5Z/8/
这是一个有效的 jsfiddle http://jsfiddle.net/Pvt5Z/8/
EDITThe above will work in FireFox and Chrome, however, IE8 returns whatever the css string for background-color is instead of normalizing it to an 'rgb' string.
编辑以上将在 FireFox 和 Chrome 中工作，但是，IE8 返回任何背景颜色的 css 字符串，而不是将其规范化为“rgb”字符串。
回答by R?zvan Flavius Panda
Part of the problem is that the colors have more than one string representation:
部分问题是颜色有多个字符串表示：
"white"
"rgb(255, 255, 255)"
"#FFFFFF"
"#FFF"
all represent the color white.
都代表白色。
To be able to compare 2 colors you would need to get both of the two colors on a common ground, in the same format.
为了能够比较 2 种颜色，您需要以相同的格式在一个共同点上获得这两种颜色。
jQuery.css()when used to obtain a css color will always return the color string in RGB format.
jQuery.css()当用于获取 css 颜色时，将始终返回 RGB 格式的颜色字符串。
You can use that feature to compare colors by always specifying the color with which you want to compare in RGB format also.
您可以使用该功能通过始终指定要以 RGB 格式进行比较的颜色来比较颜色。
Next statement will be true regardless of which string representation of the color white the element has:
无论元素具有白色的哪种字符串表示形式，下一个语句都将为真：
element.css("background-color") == "rgb(255, 255, 255)"
You could also compare color value as hex by converting element.css("background-color")to hex.
您还可以通过转换element.css("background-color")为十六进制来将颜色值与十六进制进行比较。
The answers for this questiongive a few methods of converting a RGB color to hex.
这个问题的答案提供了几种将 RGB 颜色转换为十六进制的方法。
回答by Tim Parkinson
If you have an element with the background color that you are looking for, you can compare the two background colors.
如果您有一个具有您正在寻找的背景颜色的元素，您可以比较这两种背景颜色。
if(document.getElementById("myCompare").style.backgroundColor==document.getElementById("myRef").style.backgroundColor)
if(document.getElementById("myCompare").style.backgroundColor==document.getElementById("myRef").style.backgroundColor)
回答by tonino.j
I'm not sure that you can compare computed colors. I think jQuery provides just a string recognition. And computed color relies on the browser implementation.
我不确定您是否可以比较计算出的颜色。我认为 jQuery 只提供了一个字符串识别。并且计算出的颜色依赖于浏览器的实现。
I think you can only compare two strings, I don't think you can fetch a bg color of an element and with security rely it being computed properly. It may be possible, but I think that for such functionality you would have to expand your implementation.
我认为您只能比较两个字符串，我认为您无法获取元素的 bg 颜色并且安全性依赖于正确计算它。这可能是可能的，但我认为对于此类功能，您必须扩展您的实现。
Because one browser could use one color format, other can be using other, and those are different strings.
因为一个浏览器可以使用一种颜色格式，其他浏览器可以使用另一种颜色格式，这些是不同的字符串。
