jqueryは取得したカラー値を16進数に変換するメソッドを実装します form_jquery

この記事の例では、jquery が取得したカラー値を 16 進形式に変換する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

Google、Firefox、IE8 以降のブラウザでは、取得されるカラー値が rgb(255,255,0) などの RGB 形式であることに気づいたかもしれませんが、これは実際のコーディングで使用すると非常に不快または不便に感じられます。このとき、変換が必要です。関連する変換コードを以下に示します。

具体的なコードは次のとおりです:

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

カラー形式変換 - スクリプト ホーム #thediv { 幅:200px; 高さ:100ピクセル 背景色:#CCC; 行の高さ:100px; テキスト整列:中央 カラー:#60F; } $.fn.getHexBackgroundColor=function(id,property) { var rgb=$(id).css(プロパティ); if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit) { rgb=rgb.match(/^rgb((d ),s*(d ),s*(d ))$/); 関数 hex(x) { Return ("0" parseInt(x).toString(16)).slice(-2); } rgb="#" hex(rgb[1]) hex(rgb[2]) hex(rgb[3]); } RGB を返します。 } $(document).ready(function(){ $("#bt").click(function(){ $("#thediv").text($.fn.getHexBackgroundColor("#thediv","color")) }) })

スクリプトホーム 注: エディターを実行した後、F5 キーを押して Web ページを更新し、デモを表示します。

上記のコードは要件を実現しており、RGB 形式のカラー値を 16 進形式に変換できます。実装プロセスを簡単に紹介します。

1. 実装原則:

ボタンがクリックされると、クリックイベントがトリガーされ、変換されたカラー値を div に書き込むことができるこの処理関数は getHexBackgroundColor() です。まずブラウザが IE9 未満であるかどうかを判断します。IE9 未満の場合は、カラー値が変換されずに直接返されます。IE9 未満のブラウザで取得されたカラー値は 16 進数であるため、IE8 または Google Firefox 以降のブラウザの場合は変換されます。ここでは変換の詳細については説明しません。コードのコメントを参照してください。

2. コードのコメント:

1.$.fn.getHexBackgroundColor=function(id,property){}、この関数には 2 つのパラメータがあり、最初のパラメータは要素の id 属性値です。 1 つは属性です。

2.var rgb=$(id).css(property)、色の値を取得します。このとき、rgb は 16 進数または RGB 形式になります。

3.if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit)、ブラウザが IE8 以降か、Firefox か Google Chrome かを判断します。

4.rgb=rgb.match(/^rgb((d ),s*(d ),s*(d ))$/)、これには match() 関数を使用した正規表現のある程度の理解が必要です。カラー値文字列を配列に生成できます。この配列には 4 つの要素があります。例として、最初の要素はカラー値文字列 rgb(102, 0, 255) です。 2 番目の配列要素は 102、3 番目は 0、4 番目は 255 です。

5. 関数 hex(x){} は関数を宣言します。この関数は 1 つのパラメーターを持ち、RGB 配列の項目を渡します。

6.return ("0" parseInt(x).toString(16)).slice(-2) を使用すると、受信値を 16 進数に変換できます。これを使用するのが最適です。この関数は最後の 2 文字をインターセプトし、インターセプトした 2 文字を返します。

7.rgb="#" hex(rgb[1]) hex(rgb[2]) hex(rgb[3])、値を結合します。

8.return rgb、rgb値を返します。

9.$(document).ready(function(){})、ドキュメント構造が完全にロードされたら、関数内のコードを実行します。

10.$("#bt").click(function(){})、ボタンのクリックイベントハンドラを登録します。

11.$("#thediv").text($.fn.getHexBackgroundColor("#thediv","color")) 、変換された色の値を div に書き込みます。

3. 関連記事:

1. ブラウザのバージョンを確認するには、「 ブラウザの種類とバージョンを確認するための JavaScript 」を参照してください。 2. parseInt()関数については、「 JavaScriptにおけるparseInt()関数の定義と使い方の分析 」を参照してください。 3. toString()関数については「 JavaScriptにおけるNumberオブジェクトのtoString()メソッドの解析 」を参照してください。 4.slice()関数については「 JavaScriptにおけるStringオブジェクトのslice()メソッドの解析 」を参照してください。 5. クリックイベントについては、「 jQuery におけるクリックイベントの定義と使い方 」を参照してください。 6. text() 関数については、「 JQuery の text() メソッド使用状況分析 」を参照してください。

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