jQueryはプレーンテキストでdivの緑色の背景を取得します（「＃0f0」ではなく「rgb（0,128,0）」ではなく「緑色」を取得します）

Question

divのbackground-colorは​​です。 HTMLとJavaScriptで：

<div id="rectangle" style="background-color:green;width:200px;height:100px"></div> 

var div = document.getElementById("rectangle") 
console.log(div.style.backgroundColor) 

コンソールは​​をログに記録します。

jQueryで同じことを試みました。しかし、私が得た：

var $div = $('#rectangle').css("backgroundColor"); 
console.log($div) 

コンソールログrgb(0, 128, 0)

は、テキスト​​の実際の色を返すためjQueryにおける方法はあります。または、rgb(0, 128, 0)を​​に簡単に変換する方法はありますか？

私は色を取得しようとしていますが、色を設定していません。

Answer 1

あなたは配列にRGB文字列形式で色を変換し、よりも、それはこのような名前だし、それを使用することができますhttps://github.com/Olical/color ここに小さなカラーライブラリがあります：

console.info(color.toName(color.toArray("rgb(0, 128, 0)")))

<script src="https://unpkg.com/olical-color@1.0.1/src/color.js"></script>

Answer 2

単一の引数でjQueryのcss()関数を使用すると、getComputedStyle()関数呼び出しで渡された引数と一致する現在適用されているスタイルシート、インラインスタイルなどが適用されます。

この関数を呼び出すと、元々設定されたCSS値のブラウザの内部表現が取得されます。のは、一例であることをお見せしましょう、しかしDOM/CSSOMに対してJavaScriptを使用して：あなたのブラウザによって

window.onload = function() { 
 
    var kermit = document.getElementById('kermit'); 
 
    console.log('style: ', kermit.style.backgroundColor); 
 
    console.log('computed: ', window.getComputedStyle(kermit).backgroundColor); 
 
};

<div id="kermit" style="background-color: green; color: #fff">It ain't easy</div>

、それは第二のための最初のログエントリとrgb(0, 128, 0)として​​を表示する必要があります。 jQueryのCSSのドキュメントで説明されているように、ので、私は「あなたのブラウザに応じて、」言う：

異なるブラウザは（論理的にではなくテキストで等しく、例えば、#FFF、#FFFFFF、およびRGBいるCSSカラー値を返すことがあります。 255,255,255）。あなたが欲しいものを得るために

最も簡単な方法は、xxxmatkoによって示されるように、ライブラリを使用して... getComputedStyleを介して検索カラー値と名の間のマッピングを作成するために超えて、よく...です。これは、スタイルシートの作成者、または最初に色名を指定したもの、または同じRGB値を持つ他の値を指定した場合には表示されません。名前付きの色（及び対応する異なるカラーフォーマット）の残りのためにそのマップを作成

window.onload = function() { 
 
    var colorMap = { 
 
    'rgb(0, 128, 0)': 'green' 
 
    }; 
 
    var kermit = document.getElementById('kermit'); 
 
    var computed = window.getComputedStyle(kermit).backgroundColor; 
 
    console.log('color name: ', colorMap[computed]); 
 
};

<div id="kermit" style="background-color: green; color: #fff">It ain't easy</div>

読者のための課題として残されています。