javascript - 背景色の16進数からJavaScript変数

Question

私はJavaScriptとjQueryに少し慣れていませんが、今、問題に直面しています。

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

jQueryにはcss（ "background-color"）関数があり、これを使用して、背景のRGB値をJavaScript変数に取り込むことができます。

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

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

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

JavaScriptで文字列の解析をグーグルで検索しようとしましたが、正規表現のことをよく理解していませんでした。

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

score 61 · Accepted Answer

これを試してみてください：

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

score 10 · Accepted Answer

jQuery が利用可能な場合、これは私が思いついた超コンパクトバージョンです。

var RGBtoHEX = 関数(色) {
  return "#"+$.map(color.match(/\b(\d+)\b/g),function(数字){
    return ('0' + parseInt(数字).toString(16)).slice(-2)
  }）。加入（''）;
};

score 8 · Accepted Answer

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

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

これは有効な CSS です。心配はいりません。

編集：絶対に必要な場合は、変換するための良い方法については、nickfの回答を参照してください。

score 5 · Accepted Answer

しばらく前に別の関数を見つけました（R0bb13 による）。正規表現がないので、正常に動作させるには 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

更新、別のより良い代替方法：

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

score 3 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

これらのソリューションは、背景色に rgba(x,x,x,x) を返すため、Chrome では失敗します。

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

score 1 · Accepted Answer

このソリューションはどうですか。関数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;
   }

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

次のstyle.backgroundような値:を実行するだけ"none no-repeat scroll rgb(0, 0, 0)"で簡単に変換できます"none no-repeat scroll #000000"stringRGB2HEX(style.background)

score 0 · Accepted Answer

このソリューションをhttp://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspxで見つけ、プロジェクトで使用しています

score 0 · Accepted Answer

これにより、 $(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]);
}

javascript - 背景色の16進数からJavaScript変数

10 に答える 10

Related

Reference