Question

编辑：可能与你们所说的颜色值的长度不一样。因为即使我添加了这一行，它仍然不会像Safari那样改变Safari的背景：

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

我正在动态设置HTML p元素背景颜色。

我的问题：当我在ele.style.backgroundColor中存储一个字符串（从我的函数返回）时，它不会保留或更改背景颜色。我不确定为什么我的函数不能将这个元素的背景颜色改为黑色？

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

Answer 1

你需要用零填充结果，因为你的函数只返回参数为0的＃0。

做类似的事。

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

编辑：您的功能正确，但您需要传入正确的参数。它必须是一个3或4字节的整数，其中最后3个字节分别是r，g和b值，即不是0但是像0x00DEFEED那样是十进制的14614253。

你甚至在评论中说这个号码的形式是ARGB，假设每个都是1个字节，那么这是正确的。

Answer 2

颜色有三个组件，您的函数只返回一个。如果需要，让函数返回填充前导零的数字：

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

然后构建颜色字符串：

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

修改

请注意，HTML页面中的颜色以各种方式指定，但它总是有3个组件：红色，绿色和蓝色。它始终是一个字符串。

作为Hex：#rgb或#rrggbb

在这种情况下，前导＃表示十六进制值。如果后面只有3个字符，则每个字符代表红色，绿色和蓝色的一个值。如果有6个字符，则每对代表一个值。

十进制：rgb（r，g，b）

在这种情况下，值以逗号分隔，每个值可以是一个，两个或三个字符。

百分比：rgb（10％，15％，20％）

在这种情况下，值以逗号分隔，表示每种颜色的百分比。

全部在CSS specification

动态更改背景颜色失败

2 个答案:

修改