javascript - 背景色を16進数で設定

Question

JavaScriptで要素の背景色を16進値として設定するには? backgroundColorメソッドは RGB でのみ設定します。

square.style.backgroundColor = input_color; input_color#123456 ですが、ソースセットにはrgb(18, 52, 86)

Answer 1

フォーマットされている要素の色を取得したい場合は、フォーマットからフォーマットrgbに変換できますrgbhex

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

関数を呼び出す

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

ここに例があります。

Answer 2

あなたの問題に対するより良い解決策は、このように背景色を設定することです

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

それ以外の場合は、シーカの例を使用します

Answer 3

16進数が必要な場合は、「＃123456」などの文字列として設定するか、16進数を使用できますrgb (0x12, 0x34, 0x56)。

つまり、square.style.backgroundColor ='＃123456'; およびsquare.style.backgroundColor='rgb（18、52、86）'; 動作し、まったく同じ効果があります。

したがって、あなたの質問に対する答え：それを16進値として設定する方法は、あなたの質問で答えられます：あなたは16進値を文字列に入れてそれを設定することができます。

あなたが意味しているように見えるのは、16進数で値を取得するにはどうすればよいですか？あなたが抱えている問題は、スタイルが内部的にあなたが設定したもののコピーではないという事実によって引き起こされます、それでそれがどのフォーマットで返されるか保証はありません。あなたがそれを設定した文字列のコピーが本当に必要な場合に、スタイルの設定と同時にその文字列を変数に格納します。次に、style属性を読み取る代わりに、その変数を取得します。