Menambah Dan Menghapus Class Dengan JQuery

Dalam tutorial kali ini kita akan mempelajari cara untuk menambah dan menghapus class dengan JQuery.

Dengan Jquery kita juga bisa menambah, merubah, dan menghapus sebuah class yang telah kita definisikan sebelumnya pada CSS. Misal ada sebuah elemen yang sebelumnya tidak memiliki class CSS, lalu dengan mengklik tombol tertentu maka akan ada class baru yang ditambahkan pada elemen tersebut.

Misal, terdapat elemen awal seperti ini :

Kemudian kita ingin menambahkan class baru, secara real time pada halaman web, maka kita dapat menambahkannya melalui sintaks Jquery, sehingga elemen tersebut nantinya akan menjadi seperti ini :

Dan agar dapat menambahkan class baru pada elemen HTML, method yang harus anda gunakan adalah method :

Dalam method addClass() anda juga harus mendefinisikan sebuah parameter di dalamnya, yakni nama Class yang ingin anda tambahkan.

Berikut contoh source code nya :

Dan di bawah ini adalah outputnya :

menambahkan class baru dengan jquery

Live Preview :

See the Pen
Menambah Class Baru Dengan JQuery
by Lautankode (@lautankode)
on CodePen.


Menghapus class CSS menggunakan Jquery

Selain dapat menambah class baru ke dalam elemen HTML, kalian juga dapat menghapus class yang sudah ada pada elemen, caranya adalah dengan menggunakan method removeClass(), di dalam method ini juga terdapat parameter yang harus anda definisikan sebelumnya. Yakni nama class tersebut. removeClass(‘nama_class’).

Dan berikut outputnya, ketika tombol klik di klik :menghapus class css dengan jquery

Live Preview :

See the Pen
Menghapus Class dengan JQuery
by Lautankode (@lautankode)
on CodePen.


Merubah  Class CSS menggunakan Jquery

Sedangkan jika kalian ingin merubah class css yang sudah ada sebelumnya dengan class yang baru, kita dapat mengkombinasikan penggunaan method removeClass() dengan method addClass(). Seperti ini :

Jadi urutannya kita hapus lebih dulu class yang sudah ada, baru kita tambahkan class yang baru. Di bawah ini adalah contoh source code nya :

Dan gambar di bawah ini adalah hasilnya, ketika button belum di klik :

merubah class css dengan jquery

Sedangkan gambar di bawah ini adalah hasil ketika button sudah di klik, dimana warna background – nya berubah :

manipulasi class css dengan jquery

Live Preview :

See the Pen
Merubah Class CSS dengan JQuery
by Lautankode (@lautankode)
on CodePen.


Demikian tutorial dari Menambah Dan Menghapus Class Dengan JQuery.

Dan jika ada pertanyaan lebih lanjut silakan kirim komentar pada kolom komentar di bawah.

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us