Bagaimana untuk Mendapatkan Kod Hex Warna Latar Belakang Elemen dalam JavaScript?

Kod Hex Warna Latar Belakang Elemen

Dalam tutorial ini, kita menyelami cabaran pengaturcaraan biasa: mendapatkan kod warna heksadesimal bagi elemen warna latar belakang menggunakan JavaScript.

Contoh:

Pertimbangkan kod HTML dan CSS berikut:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">

Menggunakan jQuery:

Menggunakan pustaka jQuery, anda boleh terus mengakses sifat CSS sesuatu elemen:

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

Penyelesaian JavaScript Tersuai:

Sebagai alternatif, anda boleh menggunakan fungsi JavaScript tersuai untuk mengekstrak nilai warna dalam format heksadesimal:

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('');
}

Dengan mengklik pada elemen, anda boleh mendapatkan semula kod warna heksadesimal dan memaparkannya dalam konsol.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Kod Hex Warna Latar Belakang Elemen dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!