Bagaimana untuk menambah dan mengalih keluar kelas CSS kepada elemen menggunakan jQuery?-tutorial css-php.cn

Bagaimana untuk menambah dan mengalih keluar kelas CSS kepada elemen menggunakan jQuery?

WBOY

Lepaskan： 2023-08-28 11:41:11

ke hadapan

1281 orang telah melayarinya

如何使用 jQuery 添加和删除 CSS 类到元素？

Kelas CSS memainkan peranan penting dalam reka bentuk web dan mempunyai kesan yang ketara pada penampilan keseluruhan halaman web. Memandangkan estetika halaman semakin dihargai, penyesuaian dinamik halaman web boleh meningkatkan nilainya dengan ketara. Tugas ini mungkin kelihatan menakutkan pada mulanya, tetapi jQuery menjadikannya mudah untuk melampirkan atau mengekstrak kelas CSS daripada komponen HTML dengan cepat, menyediakan cara yang cepat dan mudah untuk menjana halaman web yang interaktif dan dinamik. Dengan melampirkan atau menghapuskan kelas CSS, kami boleh mempertingkatkan penyesuaian dan kemesraan pengguna halaman web dengan mengubah suai pembentangan komponen secara on-the-fly berdasarkan tindakan pengguna atau kejadian halaman.

kaedah addClass()

Kaedah jQuery terbina dalam addClass() digunakan untuk menyediakan atribut baharu bagi setiap elemen yang dipilih. Selain itu, ia boleh digunakan untuk mengubah suai sifat elemen yang dipilih.

Tatabahasa

$('selector').addClass(className);

Salin selepas log masuk

kaedah removeClass()

JQuery menyediakan fungsi terbina dalam yang dipanggil removeClass(), yang boleh digunakan untuk mengalih keluar satu atau lebih nama kelas daripada elemen tertentu.

Tatabahasa

$(selector).removeClass(className, function(index, currentClassName))

Salin selepas log masuk

Kaedah

Kami akan menggunakan kaedah addClass() dan removeClass() yang dibincangkan di atas untuk menambah dan mengalih keluar kelas CSS kepada elemen masing-masing.

Kod di atas dibahagikan kepada tiga komponen: halaman HTML, helaian gaya CSS dan akhirnya skrip jQuery. Mari selami ketiga-tiganya satu persatu.

Halaman HTML terdiri daripada tiga komponen -

tag, yang akan bertindak sebagai elemen yang akan kami tambah atau alih keluar kelas.
Butang teg "Tambah Kelas CSS", kami akan menggunakannya untuk menambah kelas CSS pada elemen
Butang teg "Alih Keluar Kelas CSS", kami akan menggunakan ini untuk mengalih keluar kelas CSS daripada elemen.

Sekarang datang ke bahagian CSS, kami menggunakan CSS untuk menggayakan CSS yang dipanggil "gaya-p" yang mempunyai beberapa sifat khusus seperti warna latar belakang, padding, jidar, warna dan penjajaran teks. Kami akan menggunakan jQuery untuk menambah dan mengalih keluar kelas ini secara dinamik daripada elemen HTML.

Akhir sekali, kami mengusahakan asas melampirkan dan membatalkan kelas CSS dalam skrip. Untuk mencapai fleksibiliti dalam tugas ini, kami menggunakan fungsi addClass() dan removeClass() yang dinyatakan sebelum ini. Kami melaksanakan fungsi addClass() untuk melampirkan kelas "gaya p" secara dinamik pada elemen perenggan. Sebaliknya, kami melaksanakan fungsi removeClass() untuk mengalih keluar kelas "gaya p" secara dinamik daripada elemen perenggan. Melihat dengan teliti kod tersebut, kita dapat melihat bahawa kita telah menyepadukan penggunaan fungsi ini ke dalam peristiwa klik butang "Tambah Kelas CSS" dan "Alih Keluar Kelas CSS" masing-masing.

Contoh

Berikut ialah kod lengkap yang akan kami gunakan dalam contoh ini -

<!DOCTYPE html>
<html>
<head>
   <title>How to add and remove CSS classes to an element using jQuery?</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <style>
      .p-style{
         background-color: black;
         padding: 3px;
         margin: 2px;
         color: white;
         text-align: center;
      }
   </style>
</head>
<body>
   <h4>How to add and remove CSS classes to an element using jQuery?</h4>
   <div>
      <p>This is some text.</p>
   </div>
   <br/>
   <div>
      <button id="add-class">Add CSS Class</button>
      <button id="remove-class">Remove CSS Class</button> 
   </div>
   <script>
      $(document).ready(function(){
         $('#add-class').click(function(){
            $('p').addClass('p-style');
         })
         $('#remove-class').click(function(){
            $('p').removeClass('p-style');
         })
      })
   </script>
</body>
</html>

Salin selepas log masuk

Output

Fail output css class.gif akan disisipkan di sini.

Kesimpulan

Sebagai akibatnya, kefungsian dan estetika halaman web boleh dipertingkatkan dengan hebat dengan keupayaan untuk melampirkan atau menanggalkan kategori CSS secara dinamik pada komponen HTML menggunakan jQuery. Pelaksanaan bahasa skrip ini membolehkan pereka web merumuskan reka letak halaman web yang interaktif dan menarik secara visual, dengan itu meningkatkan pengalaman pengguna. Selain itu, kepelbagaian dan sifat anjal jQuery menjadikannya alat yang berharga dalam mana-mana perusahaan pembangunan web, dan pengendalian tugas manipulasi DOM yang cekap melegakan pembangun masa dan tenaga kerja. Pada asasnya, penggunaan jQuery yang bijak untuk melampirkan atau menanggalkan kategori CSS pada elemen HTML ialah cara yang mudah tetapi berkesan untuk mencapai rupa halaman web yang canggih dan canggih.

Atas ialah kandungan terperinci Bagaimana untuk menambah dan mengalih keluar kelas CSS kepada elemen menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!