Mudah belajar jQuery Part 6

jQuery Add dan Remove CSS class

Untuk dapat memanipulasi style element. jQuery memiliki beberapa cara untuk manipulasi CSS, yaitu:

addClass() – Menambahkan satu atau lebih class ke elemen yang dipilih
removeClass() – Menghapus satu atau lebih class dari elemen yang dipilih
toggleClass() – Beralih antara menambah / menghapus class dari elemen yang dipilih

Contoh css yang nanti akan kita coba

.penting {
font-weight: bold;
}

.merah {
color: red;
}

jQuery addClass()
Contoh berikut menunjukkan cara menambahkan atribut kelas ke elemen yang berbeda. Tentu saja Anda dapat memilih banyak elemen, saat menambahkan kelas:

$("#tombol").click(function(){
$("h3, br").addClass("merah");
$("#layar").addClass("penting");
});

Kita juga dapat menambahkan beberapa class css dalam satu element yang dipilih
contohnya:

$("#tombol").click(function(){
$("#layar").addClass("penting merah");
});

jQuery removeClass()
Untuk menghapus atribut dari class css tertentu
contohnya:

$("tombol").click(function(){
$("h1, p").removeClass("merah");
});

jQuery toggleClass()
Method ini berfungsi untuk menghapus atau menambah secara otomatis. misalnya jika kelas terdeteksi ada maka akan menghapus sebaliknya jika tidak ada maka akan menambah
contohnya:

$(“tombol”).click(function(){
$(“h1, p”).toggleClass(“merah”);
});

Related posts

Leave a Comment