問題描述
以背景色為條件的 if 語句 (If statement with background color as condition)
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.
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.
Any help with a solution is greatly appreciated.
‑‑‑‑‑
參考解法
方法 1:
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
方法 2:
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).
方法 3:
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.
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.
Because one browser could use one color format, other can be using other, and those are different strings.
方法 4:
You need spaces between the commas in your rgb string.
'rgb(255, 255, 255)'
Here's a working jsfiddle http://jsfiddle.net/Pvt5Z/8/
EDIT The 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.
方法 5:
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.
jQuery.css() when used to obtain a css color will always return the color string in RGB format.
You can use that feature to compare colors by always specifying the color with which you want to compare in RGB format also.
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.
The answers for this question give a few methods of converting a RGB color to hex.
(by Deprecated、Bot、airyt、tonino.j、Louis Ricci、Răzvan Flavius Panda)