jQuery - Dapatkan dan Setel Kelas CSS
Dengan jQuery, mudah untuk memanipulasi gaya elemen.
jQuery Memanipulasi CSS
jQuery memiliki beberapa metode untuk manipulasi CSS. Kami akan melihat metode berikut:
addClass()- Menambahkan satu atau lebih kelas ke elemen yang dipilihremoveClass()- Menghapus satu atau lebih kelas dari elemen yang dipilihtoggleClass()- Beralih antara menambah/menghapus kelas dari elemen yang dipilihcss()- Menyetel atau mengembalikan atribut gaya
Contoh Lembar Gaya
Stylesheet berikut akan digunakan untuk semua contoh di halaman ini:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
jQuery addClass() Metode
Contoh berikut menunjukkan cara menambahkan atribut kelas ke elemen yang berbeda. Tentu saja Anda dapat memilih beberapa elemen, saat menambahkan kelas:
Contoh
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
Anda juga dapat menentukan beberapa kelas dalam addClass()metode:
Contoh
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass() Metode
Contoh berikut menunjukkan cara menghapus atribut kelas tertentu dari elemen yang berbeda:
Contoh
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
jQuery toggleClass() Metode
Contoh berikut akan menunjukkan cara menggunakan toggleClass()metode jQuery. Metode ini beralih antara menambahkan/menghapus kelas dari elemen yang dipilih:
Contoh
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
jQuery css() Metode
Metode jQuery css()akan dijelaskan pada bab berikutnya.
Latihan jQuery
Referensi CSS jQuery
Untuk gambaran lengkap tentang semua metode CSS jQuery, silakan kunjungi Referensi HTML/CSS jQuery kami .