Bagaimana untuk mengklik warna untuk menukar warna dalam css

CSS ialah bahasa pembangunan bahagian hadapan yang biasa digunakan untuk mengindahkan halaman, menukar gaya elemen dan meningkatkan pengalaman pengguna. Antaranya, menukar warna elemen melalui peristiwa klik adalah teknik operasi biasa Mari kita perkenalkan secara terperinci cara melaksanakan fungsi ini.

1. Pengetahuan asas

Sebelum anda boleh klik pada warna untuk menukar warna, anda perlu memahami pengetahuan asas CSS. CSS, singkatan untuk Cascading Style Sheets, ialah bahasa gaya yang digunakan untuk menentukan rupa dan gaya dokumen HTML. CSS boleh mengawal warna, saiz, fon dan atribut teks yang lain, serta saiz dan kedudukan elemen.

Dalam CSS, anda boleh memilih elemen dengan cara berikut:

1. Pemilih elemen: Pilih elemen mengikut nama elemen, seperti p, div, a, dsb.
2. Pemilih ID: Pilih elemen mengikut ID elemen, seperti #elementId. Satu ID hanya boleh sepadan dengan satu elemen.
3. Pemilih kelas: Pilih elemen mengikut nama kelasnya, seperti .className. Nama kelas boleh sepadan dengan berbilang elemen.
4. Pemilih atribut: Pilih elemen melalui atribut elemen, seperti [type="text"].
5. Pemilih kelas pseudo: pilih elemen melalui status elemen, seperti :hover, :active, dsb.
6. Pemilih gabungan: Pilih elemen melalui gabungan berbilang pemilih, seperti p.active, #elementId.className, dsb.

2. CSS untuk merealisasikan klik pada warna untuk menukar warna

Sekarang kita telah menguasai pengetahuan asas CSS, kita boleh mula menyedari fungsi klik pada warna untuk menukar warna .

1. Kod HTML

Pertama, anda perlu menetapkan elemen dalam HTML Di sini kami mengambil elemen div sebagai contoh. Kodnya adalah seperti berikut:

Klik untuk menukar warna

Di sini, kami menetapkan kelas sebagai "color-change" elemen div dan tetapkan teks "Klik untuk menukar warna".

2. Gaya CSS

Seterusnya, kita perlu menggunakan gaya CSS untuk melaksanakan fungsi mengklik elemen untuk menukar warna.

Pertama, tambahkan atribut warna pada elemen div. Kodnya adalah seperti berikut:

.tukar warna {
warna latar belakang: biru;
warna: #fff;
padding: 10px;
kursor: penunjuk;
}

Di sini, kami menetapkan warna latar belakang elemen div kepada biru, warna teks kepada putih, jidar teks kepada 10px dan jenis kursor ke tangan.

Seterusnya, tambahkan pengendali acara klik pada elemen div. Kodnya adalah seperti berikut:

.color-change:active {
background-color: red;
}

Di sini, kami menggunakan pseudo-class selector: active to mewakili elemen div Keadaan apabila diklik. Apabila elemen div aktif, warna latar belakangnya ditukar kepada merah.

3. Kod JavaScript

Akhir sekali, anda perlu menambah pengendali acara klik pada elemen div. Kodnya adalah seperti berikut:

document.querySelector('.color-change').addEventListener('click', function() {
this.style.backgroundColor = '#ff0';
}) ;

Di sini, kami menggunakan kaedah querySelector untuk mendapatkan elemen div dengan kelas "perubahan warna", dan kemudian menambah pendengar acara klik padanya. Apabila elemen div diklik, fungsi panggil balik yang ditentukan akan dilaksanakan dan warna latar belakangnya akan ditukar kepada kuning.

Ringkasan

Melalui langkah di atas, kita boleh melaksanakan fungsi yang menukar warna elemen selepas mengklik padanya. Teknik ini boleh digunakan dalam banyak bidang, seperti menukar warna butang, menukar warna kotak teks, dsb. Perlu diingatkan bahawa apabila melaksanakan fungsi ini, perhatian harus diberikan kepada kebolehselenggaraan dan keserasian kod, dan cuba mengelakkan isu keserasian dan redundansi kod.

Atas ialah kandungan terperinci Bagaimana untuk mengklik warna untuk menukar warna dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!