jQuery が CSS スタイルでカラー値を取得する問題、ブラウザ形式ごとに異なる解決策

jQuery が CSS スタイルでカラー値を取得する問題、ブラウザ形式ごとに異なる解決策_jquery

WBOY

リリース： 2016-05-16 17:34:02

オリジナル

926 人が閲覧しました

jQueryを使用してスタイルのbackground-colorの値を取得すると、IE10未満のバージョンでは取得した色の値がHEX形式[#ffff00]で表示されるのに対し、IE10、Chrome、FirefoxではHEX形式[#ffff00]で表示されることがわかりました。 GRB 形式。[rgb(255,0,0)] を表示します。カラー値を判断して処理する必要があるため、処理を容易にするために統一されたカラー形式 (できれば HEX 形式) を取得する必要があります。検索した結果、海外の 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 値を取得できます。

小さな変更を加えてみましょう。つまり、HEX 値が表示されている場合 (IE10 未満)、IE 以外のブラウザの場合は、値を RGB 形式に変換します。 🎜>

コードをコピーしますコードは次のとおりです。

$.fn.getBackgroundColor = function() { 
 var rgb = $(this ).css('background-color');
 if(rgb >= 0) return rgb;//16 進値の場合は直接返します 
 else{ 
 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;
 }