Menambahkan Class ke Elemen dengan JavaScript dan jQuery
Menambahkan class ke elemen HTML merupakan tugas umum dalam pengembangan web. Baik JavaScript maupun jQuery menawarkan cara mudah untuk melakukan hal ini. Artikel ini akan membahas kedua metode tersebut, memungkinkan Anda untuk memilih metode yang paling sesuai dengan kebutuhan Anda.
Menambahkan Class dengan JavaScript
JavaScript menyediakan metode classList.add() untuk menambahkan class ke elemen. Berikut contohnya:
// Mendapatkan elemen dengan ID "myElement"
const myElement = document.getElementById("myElement");
// Menambahkan class "newClass" ke elemen
myElement.classList.add("newClass");
Kode di atas akan menambahkan class "newClass" ke elemen dengan ID "myElement".
Menambahkan Class dengan jQuery
jQuery menawarkan cara yang lebih ringkas untuk menambahkan class ke elemen. Gunakan fungsi addClass() untuk menambahkan class ke elemen yang dipilih. Berikut contohnya:
// Menambahkan class "newClass" ke elemen dengan ID "myElement"
$("#myElement").addClass("newClass");
Kode di atas melakukan hal yang sama dengan kode JavaScript sebelumnya, yaitu menambahkan class "newClass" ke elemen dengan ID "myElement".
Perbedaan JavaScript dan jQuery
- Singkat dan Ringkas: jQuery menawarkan sintaks yang lebih ringkas dan mudah dipelajari.
- Fungsionalitas Tambahan: jQuery menyediakan lebih banyak fungsi dan metode untuk memanipulasi DOM, termasuk metode untuk menghapus class (
removeClass()) dan menukar class (toggleClass()). - Kecepatan: jQuery biasanya sedikit lebih lambat daripada JavaScript karena menggunakan fungsi tambahan untuk memanipulasi DOM. Namun, perbedaan kecepatan ini biasanya tidak terlalu signifikan.
Menentukan Class mana yang Akan Ditambahkan
Anda dapat menambahkan beberapa class sekaligus dengan memisahkan nama class dengan spasi.
// Menambahkan class "newClass" dan "anotherClass"
$("#myElement").addClass("newClass anotherClass");
Contoh Penggunaan
Berikut contoh cara menggunakan JavaScript dan jQuery untuk menambahkan class ke elemen berdasarkan peristiwa mouseover.
JavaScript:
Ini adalah paragraf.
jQuery:
Ini adalah paragraf.
Contoh di atas menunjukkan bagaimana menambahkan dan menghapus class "highlight" pada elemen <p> saat mouse diarahkan di atasnya.
Kesimpulan
Baik JavaScript maupun jQuery menawarkan cara yang efektif untuk menambahkan class ke elemen HTML. Pilih metode yang paling sesuai dengan kebutuhan dan preferensi Anda. jQuery menawarkan sintaks yang lebih ringkas dan fungsionalitas tambahan, sementara JavaScript menawarkan kontrol yang lebih langsung atas elemen HTML.