jQueryでRGBを16進数のカラー値に変換する方法?

jQuery で RGB カラーから 16 進カラー値を取得する

問題:

jQuery では、css() メソッドは次の値を取得します。 rgb(r, 形式の赤、緑、青 (RGB) 値としての要素の背景色g、b)。ただし、一般的な要件は、#FFFFFF などの同等の 16 進カラー値を取得することです。

解決策:

RGB から 16 進値を取得する従来の方法には、以下が含まれます。手動変換は面倒な場合があります。幸いなことに、これは簡潔な 1 行関数で実現できます。

const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`

この関数は RGB 形式と RGBA 形式の両方に対応し、汎用性を確保しています。

使用例:

const element = $('#selector');
const rgbColor = element.css('backgroundColor');
const hexColor = rgba2hex(rgbColor);

モダンの答えを更新しましたブラウザ:

元のソリューション以来、ECMAScript 2015 機能のブラウザ サポートが大幅に改善されました。これにより、より効率的かつ簡潔な RGB から 16 進数への変換が可能になります。

const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`

この関数は、特に RGB カラー形式に対応した同様の機能を提供します。

以上がjQueryでRGBを16進数のカラー値に変換する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。