Dynamically changing background color fails

Question

Edit: It may not all be to do with the length of the color value as you guys are saying. Because even if I add this line it still doesn't change the background on Safari like it should:

newEle.style.background = "-webkit-gradient(linear, left top, right top, from(#2F2727), to(#FF0000))";

I am dynamically setting a HTML p elements background color.

My Problem: When I go to store a string(Returned from my function) in ele.style.backgroundColor it doesn't stay or change the background color. I am unsure why my function cannot change the background color of this element to black?

<html>
<head>
</head>
<body>

    <div id="mainContent">
        <p id="test">abcdef</p>
    </div>

</body>
    <script type="text/javascript">
    <!--

        function decimalToHex( num )
        {
           // num is usually a decimal color in form ARGB

           if (num == null || num == "undefined") { return "#FFFFFF"; }

           var intNum = (parseInt(num,10)) & 0x00FFFFFF;
           return "#"+intNum.toString(16);
        }

        var newEle = document.createElement("p"); 
        newEle.style.backgroundColor = decimalToHex(0); // this fails doesn't set the background color
        //newEle.style.backgroundColor = "#FF0000";       // But this works & sets it to red. Whats wrong with my function?!
        newEle.innerHTML = "kjdskjdkgj";
        document.getElementById("mainContent").appendChild(newEle);
    -->
    </script>
</html>

try to paste the script code in body or head tag you are trying out of the body tag may be this is creating a problem. — Kiran
– Kiran, Commented Nov 1, 2011 at 3:31
Your function is outputting "#0" for decimal 0, which is not a valid css color. #000 or #000000 are the legal ways to represent Black with hex notation. I'm not sure I understand how you're representing RGB with an integer. Can you explain? — ddrace
– ddrace, Commented Nov 1, 2011 at 3:39

jli · Accepted Answer · 2011-11-01 03:54:42Z

1

You will need to pad the result with zeros since your function will just return #0 with the argument 0.

Do something like.

var s = intNum.toString(16);
while(s.length < 6) s = "0" + s;
return "#" + s;

Edit: your function is correct, but you need to pass in a correct parameter. It needs to be a 3 or 4 byte integer where the last 3 bytes are the r, g and b values respectively, i.e. not 0 but something like 0x00DEFEED which is 14614253 in decimal.

You even say in a comment that the number is in the form ARGB, and assuming those are each 1 byte then this is correct.

edited Nov 1, 2011 at 3:54

answered Nov 1, 2011 at 3:34

jli

6,6432 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RobG Over a year ago

The length has to be 2, since the color is 3 numbers of 2 digits each concatenated in one string, it isn't one number.

jli Over a year ago

Doesn't he want a string in form.of #RRGGBB? I realize there is a problem with my method, but the overall number portion has length 3*2=6

jli Over a year ago

Actually his function is right, he's just using it wrong. If he passed in a 4 byte integer where the last 3 bytes are actually each 1 byte integers, it would work.

RobG Over a year ago

that's correct, but it's 3 separate numbers, you can't just padd on the left or you might shift the number to the right, e.g. #ff becomes #0000ff which goes from red to green.

jli Over a year ago

Which is why his input is wrong. It should only ever be passed a parameter that has at least 3 bytes (1 each for RGB). In that case the padding thing is unnecessary except for the R byte.

RobG · Accepted Answer · 2011-11-01 04:25:20Z

0

The colour has three components, your function returns only one. Have the function return just the number padded with a leading zero if necessary:

       var intNum = '' + (parseInt(num,10)) & 0x00FFFFFF; 
       intNum = intNum.toString(16);
       if (intNum.length < 2) intNum = '0' + intNum;
       return  intNum;

Then build the colour string:

newEle.style.backgroundColor = '#' + decimalToHex(255) + 
                                     decimalToHex(0) + decimalToHex(0);

Edit

Note that color in ah HTML page is specified in various ways but it always has 3 components: red, green and blue. It is always a string.

As Hex: #rgb or #rrggbb

In this case, the leading # indicates hex values. If there are only 3 following characters, then each character represents one value for red, green and blue. If there are 6 characters, each pair represents one value.

As decimal: rgb(r, g, b)

In this case, the values are comma separated and each value can be one, two or three characters.

As percent: rgb(10%, 15%, 20%)

In this case, the values are comma separated and represent the percentage of each color.

It's all in the CSS specification

edited Nov 1, 2011 at 4:25

answered Nov 1, 2011 at 3:36

RobG

148k32 gold badges180 silver badges216 bronze badges

2 Comments

sazr Over a year ago

Problem is I have a long decimal that is in the form ARGB. Is it possible to break that up into the A, R, G, B values?

RobG Over a year ago

RGB is three values from 0 to 255 (in decimal) or 0 to FF (hex). I don't know what A is. You have to convert each value separately. I would split the string into components, convert each, then put it back together. Provide some examples of values and how you want them processed.

Collectives™ on Stack Overflow

Dynamically changing background color fails

2 Answers 2

5 Comments

Edit

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Edit

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related