style_jquery の色の値を取得する jQuery メソッド

この記事の例では、jQuery がスタイル内の色の値を取得する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

今日スタイルのbackground-colorの値をjQueryを使って取得したところ、IEで取得した色の値がChromeやFirefoxで表示される形式と異なり、IEではHEXで表示されることが分かりました。 [#ffff00] 形式ですが、Chrome では [rgb(255,0,0)] を GRB 形式で表示します。色の値をデータベースに保存する必要があるため、色の値の形式を統一したいと考えています。 （実際には統一していなくても収納可能です）検索した結果、海外の Web サイトからコードを入手しました:

$.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 rgb= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

上記の定義は jQuery 関数であり、$("#bg").getHexBackgroundColor(); を通じてタグ id="bg" の背景色の RGB 値を取得できます。

小さな変更を加えてみましょう。つまり、IE ブラウザの場合は値を直接取得し、非 IE ブラウザの場合は値を RGB 形式に変換します。

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

この記事が皆さんの jQuery プログラミングに役立つことを願っています。