以十六进制设置背景颜色

Question

How to set elements background color as hex value in JavaScript? backgroundColor method sets only in rgb.

square.style.backgroundColor = input_color; input_color is #123456, but in the source sets rgb(18, 52, 86)

Answer 1

A better solution to your problem would be just to set the background color like this

square.style.backgroundColor = "rgb(12,34,56)";

Otherwise I would use Sheika's example

Answer 2

If you want to get the color of an element which is in rgb format then you can convert it from rgb to hex format

function rgbToHex(col)
{
    if(col.charAt(0)=='r')
    {
        col=col.replace('rgb(','').replace(')','').split(',');
        var r=parseInt(col[0], 10).toString(16);
        var g=parseInt(col[1], 10).toString(16);
        var b=parseInt(col[2], 10).toString(16);
        r=r.length==1?'0'+r:r; g=g.length==1?'0'+g:g; b=b.length==1?'0'+b:b;
        var colHex='#'+r+g+b;
        return colHex;
    }
}

Call the function

var col=document.getElementById('myDiv').style.backgroundColor;
alert(rgbToHex(col)); // alerts hex value

Here is an example .

Answer 3

找到了一些应该工作的东西：

document.getElementById('square').attributes['style'].textContent='background-color:'+ input_color 

Answer 4

Method backgroundColor supports hex value and others too. You can use square.style.backgroundColor = '#FF0000' .

Here is the code snippet that demonstrates it:

 document.getElementById('square').style.backgroundColor = '#FF0000';

 <div id="square" style="background-color: rgb(0, 255, 0); width: 50px; height: 50px"></div>

Answer 5

If you want hex, you can set it as a string such as '#123456', or you can use hex numbers rgb (0x12, 0x34, 0x56) . Does that answer your question?