CODEWITHSUNDEEP
javascripthtmlcss
sazr
sazr

Reputation: 25928

Dynamically changing background color fails

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>

Upvotes: 0

Views: 480

Answers (2)

RobG
RobG

Reputation: 147413

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

Upvotes: 0

jli
jli

Reputation: 6623

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.

Upvotes: 1

Related Questions