hujung hadapan web
tutorial css
Bagaimana untuk menambah dan mengalih keluar kelas CSS kepada elemen menggunakan jQuery?
Bagaimana untuk menambah dan mengalih keluar kelas CSS kepada elemen menggunakan jQuery?
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);
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))
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>
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
Bagaimana anda menggunakan CSS untuk membuat kesan teks, seperti bayang -bayang teks dan kecerunan?
Mar 14, 2025 am 11:10 AM
Artikel ini membincangkan menggunakan CSS untuk kesan teks seperti bayang -bayang dan kecerunan, mengoptimumkannya untuk prestasi, dan meningkatkan pengalaman pengguna. Ia juga menyenaraikan sumber untuk pemula. (159 aksara)
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan
Mar 24, 2025 am 10:37 AM
Saya hanya berbual dengan Eric Meyer pada hari yang lain dan saya teringat cerita Eric Meyer dari tahun -tahun pembentukan saya. Saya menulis catatan blog mengenai kekhususan CSS, dan
