JavaScript を使用して Web 要素の背景色を 16 進コードとして取得するにはどうすればよいですか?-CSSチュートリアル-php.cn

JavaScript を使用して Web 要素の背景色を 16 進コードとして取得するにはどうすればよいですか?

DDD

リリース： 2024-12-31 17:45:10

オリジナル

778 人が閲覧しました

How Can I Get a Web Element's Background Color as a Hexadecimal Code Using JavaScript?

要素の背景の 16 進数のカラーコードを取得する

Web 要素を操作する場合、背景のカラーコードを 16 進形式で取得できる機能は、さまざまなスタイル設定に便利です。そしてデザイン目的。この質問は、JavaScript と CSS を利用して要素の背景カラーコードを取得するというユーザーのニーズを詳しく掘り下げています。

コードの実装

背景カラーコードを取得するには、JavaScript の css() 関数を利用できます。。たとえば、

の背景カラーコードを取得したい場合は、クラス名が「div」の要素の場合、次のコードスニペットを使用できます:

console.log($(".div").css("background-color"));

ログイン後にコピー

このコードは、jQuery ライブラリを使用して要素にアクセスし、css() 関数を使用して値を取得します。「背景色」プロパティの場合。結果の背景色コードは 16 進数形式でコンソールに記録されます。

16 進数変換用のカスタム関数

または、カスタム JavaScript 関数を定義して、CSS から取得した色の値を変換することもできます。 () 関数を 16 進形式に変換します。以下に例を示します。

var color = '';
$('div').click(function() {
  var x = $(this).css('backgroundColor');
  hexc(x);
  console.log(color);
})

function hexc(colorval) {
  var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  delete(parts[0]);
  for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
  }
  color = '#' + parts.join('');
}

ログイン後にコピー

この例では、hexc() 関数は RGB カラー値を入力として受け取り、それを 16 進形式に変換します。この関数は、

が実行されたときに呼び出されます。要素がクリックされました。結果の 16 進数のカラーコードは color 変数に保存され、コンソールに記録されます。