If statement with background color as condition

Question

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.

have you tried alerting some of the values? what's the output of console.log($('#ARCStatusBox1EQETD').css('backgroundColor')); ? — airyt, Nov 13 '12 at 20:27
You might appreciate this answer: http://stackoverflow.com/questions/5999209/jquery-how-to-get-the-background-color-code-of-an-element — Patrick Moore, Nov 13 '12 at 20:29
You're almost certainly doing something wrong. Behavior and presentation should depend on state. Making decisions based on presentation is wrong. In your particular case where you determine one color based on another, you should probably simply determine the two colors together. — Adam Zalcman, Nov 13 '12 at 20:34

Bot · Accepted Answer · 2012-11-13T20:34:24.420

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

score 1 · Answer 2 · edited Nov 13 '12 at 20:30

1

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).

edited Nov 13 '12 at 20:30

Adriano Carneiro

57,693
12
90
123

answered Nov 13 '12 at 20:29

airyt

354
2
9

So, what format should I use? I'm using both chrome and IE, and using a six dig hex format, and rgb and an rgba format I turn out nothing except the else statement. – Deprecated Nov 13 '12 at 20:43
i think some other peeps have beat me to it, but you'll have to take the response and normalize it into a string with fixed format for jquery/javascript comparison. then you can act on that comparison. the function that normalizes the color string will simply detect what kind of input it is and act accordingly. – airyt Nov 13 '12 at 20:50

score 0 · Answer 3 · answered Nov 13 '12 at 20:28

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.

score 0 · Answer 4 · answered Nov 13 '12 at 20:34

0

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.

answered Nov 13 '12 at 20:34

Louis Ricci

20,804
5
48
62

apparently Chrome also converts `rbga(255,255,255,1)` to `rgb(255,255,255)`. See here: http://jsfiddle.net/Pvt5Z/10/ – Shmiddty Nov 13 '12 at 20:43

score 0 · Answer 5 · edited May 23 '17 at 11:43

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.

score 0 · Answer 6 · answered Oct 23 '13 at 17:19

0

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)

answered Oct 23 '13 at 17:19

Tim Parkinson

1

If statement with background color as condition

6 Answers6