Hex not working

Question

How is that this works (div cirlcedecider2 has is styled "green")

function badge1(){
if (document.getElementById("circledecider2").style.color == "green"){

document.getElementById("badge1").style.backgroundColor= "#ABCF37";
document.getElementById("badge1").style.width = "200px";
document.getElementById("badge1").style.height = "200px";

}}

But this does not? (div cirlcedecider2 has is styled "#ABCF37")

function badge1(){
if (document.getElementById("circledecider2").style.color == "#ABCF37"){

document.getElementById("badge1").style.backgroundColor= "#ABCF37";
document.getElementById("badge1").style.width = "200px";
document.getElementById("badge1").style.height = "200px";

}}

The only difference is using a hexcode.

what is the color of circledecider2 ? Is it really GREEN or any other color? — Ganesh Pandhere, Sep 12 '13 at 12:40
It depends on what is set. See this please. http://stackoverflow.com/questions/11670019/does-object-style-color-only-return-rgb — Rajat Sharma, Sep 12 '13 at 12:41

Paul S. · Answer 1 · 2013-09-12T12:56:31.660

#ABCF37 gets parsed and changed into a different format. The result is most likely browser specific.

document.body.style.color = "#ABCF37"
document.body.style.color; // "rgb(171, 207, 55)"

And obviously

"rgb(171, 207, 55)" == "#ABCF37"; // false

You will need to write some function to interpret the colours and return something standard you can compare against (possibly in a rgba format), or a function to compare two colours (which may be easier).

function compareColour(col1, col2) {
    var e = document.createElement('span')
    document.body.appendChild(e);
    // standardise
    e.style.color = col1;
    col1 = window.getComputedStyle(e).color;
    e.style.color = col2;
    col2 = window.getComputedStyle(e).color;
    // cleanup
    document.body.removeChild(e);
    return col1 === col2;
}

compareColour("#ABCF37", "rgb(171, 207, 55)"); // true

you are sure its guaranteed to return in the RGB or RGBA string format? — Diego C Nascimento, Sep 12 '13 at 12:44

score 0 · Accepted Answer · answered Sep 12 '13 at 12:44

Reference color

function badge1(){
if (document.getElementById("circledecider2").style.color == "rgb(171, 207, 55)")
{

document.getElementById("badge1").style.backgroundColor= "#ABCF37";
document.getElementById("badge1").style.width = "200px";
document.getElementById("badge1").style.height = "200px";

}}

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

The color you retrieve is browser specific.

In IE you can see the browser returning hex value, for that too your code should compare the alphabets in hex values in small case i.e. #abcf37 in your case.

Other browsers like chrome return it in rgb format.

Alternate solution is to convert the value in hex format if returned in rgb.

Refer answer here for the alternate solution.

edited May 23 '17 at 11:56

Community

1
1

answered Sep 12 '13 at 12:58

niksvp

5,545
2
24
41

Hex not working

3 Answers3