web-dev-qa-db-ja.com

JavaScript変数への背景色の16進数

私はJavaScriptとjQueryを初めて使用しているのですが、今問題に直面しています。

PHPにいくつかのデータを投稿する必要があり、データの1ビットはdiv Xの背景色の16進数である必要があります。

jQueryにはcss（ "background-color"）関数があり、それを使用して、背景のRG​​B値をJavaScript変数に取得できます。

CSS関数は、このrgb（0、70、255）のような文字列を返すようです。

CSSで16進数として設定されているにもかかわらず、背景色の16進数を取得する方法が見つかりませんでした。

だから私はそれを変換する必要があるようです。 RGBを16進数に変換する関数を見つけましたが、r、g、bの3つの異なる変数で呼び出す必要があります。したがって、文字列rgb（x、xx、xxx）を解析してvar r = xにする必要があります。 var g = xx; var b = xxx;何とかして。

JavaScriptで文字列をパースするグーグルを試してみましたが、正規表現のことをよく理解していませんでした。

Divの背景色を16進数として取得する方法はありますか、または文字列を3つの異なる変数に変換できますか？

javascriptjqueryhexrgbbackground-color
36
Removed_account

これを試してください：

var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.

var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]

delete (parts[0]);
for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
} 
var hexString ='#'+parts.join('').toUpperCase(); // "#0070FF"

以下のコメントの質問への回答：

どちらが得られるかに応じて、rgbとrgbaの両方を処理するように正規表現を変更しようとしています。ヒントはありますか？ありがとう。

この質問のコンテキストで意味があるかどうかは正確にはわかりませんが（16進数でrgbaの色を表すことができないため）、他の用途があると思います。とにかく、正規表現を次のように変更できます。

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(0\.\d+))?\)$/

出力例：

var d = document.createElement('div');
d.style.backgroundColor = 'rgba( 255,  60, 50, 0)';

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0\.\d+))?\)$/.exec(d.style.backgroundColor);

// ["rgba(255, 60, 50, 0.33)", "255", "60", "50", "0.33"]
62
nickf

JQueryを使用できる場合、これは私が思いついた超コンパクトバージョンです。

 var RGBtoHEX = function（color）{
 return "＃" + $。map（color.match（/\b（\ d +）\ b/g）、function（digit）{
 return（ '0' + parseInt（digit）.toString（16））。slice（-2）
}）。join（ ''）; 
};
10
Fotios

次のように、rgbを使用してCSSカラーを設定することもできます。

background-color: rgb(0, 70, 255);

有効なCSS ですので、ご安心ください。

編集：どうしても変換する必要がある場合に変換するための適切な方法については、 nickf answer を参照してください。

8
lpfavreau

しばらく前に別の関数を見つけました（ by R0bb1 ）。正規表現がないため、適切に機能させるためにnickfから借りる必要がありました。これは、ifステートメントやループを使用せずに結果を返す興味深い方法であるため、投稿するだけです。また、このスクリプトは＃付きの16進数値を返します（これは、当時使用していた Farbtastic プラグインで必要でした）

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
 var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

// call the function: rgb( "rgb(0, 70, 255)" );
// returns: #0046ff

注：nickfのスクリプトからの16進数の結果は、0070ffではなく0046ffになるはずですが、大した問題ではありません：P

更新、別のbetter代替方法：

function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {
  return ("0" + parseInt(x).toString(16)).slice(-2);
 }
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
5
Mottie

JQuery ..

var cssColorToHex = function(colorStr){
    var hex = '#';
    $.each(colorStr.substring(4).split(','), function(i, str){
        var h = ($.trim(str.replace(')',''))*1).toString(16);
        hex += (h.length == 1) ? "0" + h : h;
    });
    return hex;
};
3
Mark Rhodes

これらのソリューションは、背景色としてrgba（x、x、x、x）を返すため、Chromeでは失敗します。

編集：これは必ずしも本当ではありません。 Chromeは、何をしているのかに応じて、引き続きrgb（）を使用して背景を設定します。ほとんどの場合、アルファチャネルが適用されていない限り、Chromeが応答しますrgbaの代わりにrgbを使用。

1
Kevin.Riggen

このソリューションでは、関数stringRGB2HEXは、「rgb（r、g、b）」形式の色のすべての出現箇所が16進数形式「#rrggbb」で置き換えられた入力文字列のコピーを返します。 。

_   //function for private usage of the function below
   //(declaring this one in global scope should make it faster rather than 
   //declaraing it as temporary function inside stringRGB2HEX that need to be
   //instantieted at every call of stringRGB2HEX
   function _rgb2hex(rgb_string, r, g, b) 
   {
      //VERY IMPORTANT: by adding (1 << 24) we avoid 'rgb(0, 0, 0)' to be mistakenly converted into '#0'
      var rgb = (1 << 24) | (parseInt(r) << 16) | (parseInt(g) << 8) | parseInt(b); //same thing of: ( r + (256 * g) + (65536 * b) + 16777216)
      //toString(16) specify hex 16 radix, works only for numbers [source: http://msdn.Microsoft.com/en-us/library/dwab3ed2(v=VS.85).aspx]   
      return '#' + rgb.toString(16).substr(1); //substr(1) because we have to remove the (1 << 24) added above
   }

   function stringRGB2HEX(string)
   {
      if(typeof string === 'string')
         string = string.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/g, _rgb2hex);
      return string;
   }
_

これはbackgroundのような複雑なスタイルのRGBカラーも変換します。

_style.background_のような値："none no-repeat scroll rgb(0, 0, 0)"は、stringRGB2HEX(style.background)を実行するだけで、簡単に_"none no-repeat scroll #000000"_に変換されます。

1
Marco Demaio

http://www.phpied.com/rgb-color-parser-in-javascript/

文字列を受け入れ、その中から有効な色を見つけ出そうとするJavaScriptクラス。受け入れられる入力の例は次のとおりです。

* rgb(0, 23, 255)
* #336699
* ffee66
* fb0
* red
* darkblue
* cadet blue
1
user558987

私はこの解決策を見つけました http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx と私は私のプロジェクトでそれを使用しています

0
Amr Elgarhy

これで、$（selector）.getHexBackgroundColor（）を使用して16進値を簡単に返すことができます：

$.fn.getHexBackgroundColor = function() {
    var rgb = $(this).css('background-color');
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
0
The Virtual Machinist