Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mendapatkan Kod Hex Warna Latar Belakang Elemen dalam JavaScript?

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

Susan Sarandon
Susan Sarandonasal
2024-12-03 19:01:17746semak imbas

How to Get an Element's Background Color Hex Code in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn