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.

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.

• javascript
• jquery
• html
• css

• 2 have you tried alerting some of the values? what's the output of console.log($('#ARCStatusBox1EQETD').css('backgroundColor')); ? – airyt Commented Nov 13, 2012 at 20:27
• 2 You might appreciate this answer: stackoverflow./questions/5999209/… – Patrick Moore Commented Nov 13, 2012 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 Commented Nov 13, 2012 at 20:34

6 Answers 6

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

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

I'm not sure that you can pare puted colors. I think jQuery provides just a string recognition. And puted color relies on the browser implementation.

I think you can only pare two strings, I don't think you can fetch a bg color of an element and with security rely it being puted 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.

You need spaces between the mas in your rgb string.

'rgb(255, 255, 255)'

Here's a working jsfiddle http://jsfiddle/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.

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 pare 2 colors you would need to get both of the two colors on a mon 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 pare colors by always specifying the color with which you want to pare 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 pare 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.

If you have an element with the background color that you are looking for, you can pare the two background colors.

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