jQuery menukar gaya fon pada klik butang

Dalam reka bentuk bahagian hadapan, gaya fon adalah bahagian penting halaman. Jika anda ingin membenarkan pengguna menukar gaya fon apabila mereka mengklik butang, jQuery ialah cara yang sangat mudah untuk melakukannya. Dalam artikel ini, kami akan menunjukkan kepada anda cara menggunakan jQuery untuk menukar gaya fon dengan satu klik butang.

Persediaan

Sebelum anda bermula, anda perlu memastikan anda telah melakukan persediaan berikut:

1. Memperkenalkan perpustakaan jQuery

Dalam HTML Dalam dokumen, perpustakaan jQuery perlu diperkenalkan. Anda boleh memilih untuk menggunakan CDN atau memuat turun jQuery secara tempatan dan memperkenalkannya ke dalam dokumen. Berikut ialah contoh memetik CDN:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Menyediakan gaya CSS

Dalam fail CSS, anda perlu menulis beberapa gaya apabila gaya fon berubah apabila butang diklik. Berikut ialah contoh:

.change {
  font-size: 20px;
  font-weight: bold;
  color: #00bfff;
}

Dalam contoh ini, kami mentakrifkan kelas bernama ".change". Apabila kelas ini ditambahkan pada elemen, ia akan menggunakan saiz fon, berat dan perubahan warna.

Langkah

1. Tambahkan pendengar acara klik

Pertama, kita perlu menambah pendengar acara klik pada butang untuk membalas butang yang diklik peristiwa. Berikut ialah contoh:

$("button").click(function() {
  // 在此处添加代码 
});

Dalam contoh ini, kami menggunakan pemilih jQuery untuk memilih semua butang dan menambah pendengar acara klik untuknya. Apabila butang diklik, kami akan melaksanakan beberapa kod dalam fungsi pendengar.

2. Pilih elemen dan tukar gaya

Dalam fungsi pendengar acara klik, kita boleh mencapai kesan mengklik butang untuk menukar gaya fon dengan memilih elemen dan mengubah gaya. Berikut ialah contoh:

$("button").click(function() {
  // 选择元素并改变样式
  $("p").toggleClass("change");
});

Dalam contoh ini, kami menggunakan pemilih jQuery untuk memilih semua elemen perenggan dan menggunakan kaedah toggleClass untuk menogol nama kelas mereka. Apabila nama kelas ialah ".change", semua elemen perenggan akan menggunakan perubahan gaya yang ditakrifkan sebelum ini. Apabila nama kelas dialih keluar, elemen perenggan akan kembali kepada gaya asalnya.

Contoh Lengkap

Berikut ialah contoh kod HTML, CSS dan JavaScript yang lengkap untuk mencapai kesan menukar gaya fon dengan mengklik butang.

  
  
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        $("p").toggleClass("change");
      });
    });
  </script>


  改变字体样式
  
这是一个段落元素。
  
这是另一个段落元素。

Dalam contoh ini, kami telah menambahkan butang dan dua elemen perenggan pada halaman. Apabila butang diklik, saiz fon, berat dan warna elemen perenggan akan berubah.

Atas ialah kandungan terperinci jQuery menukar gaya fon pada klik butang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!