Dalam fase mendesain halaman web atau situs web, ada situasi tertentu di mana Anda tidak perlu lagi mengakses beberapa elemen tertentu karena beberapa pembaruan. Selain itu, ketika ada kebutuhan untuk menetapkan lebih dari satu kelas ke elemen tertentu dalam html. Dalam skenario kasus seperti itu, mengubah kelas elemen HTML dalam JavaScript sangat membantu untuk memenuhi situasi seperti itu.
Blog ini akan mendemonstrasikan pendekatan yang perlu dipertimbangkan saat mengubah kelas elemen HTML di JavaScript.
Bagaimana Mengubah Kelas Elemen HTML Dengan JavaScript?
Untuk mengubah kelas elemen HTML dengan JavaScript, pendekatan berikut dapat diterapkan:
-
- “ nama kelas ' Properti.
- “ daftar kelas ' Properti.
Pendekatan 1: Ubah Kelas Elemen HTML Dengan JavaScript Menggunakan Properti className
Pendekatan ini dapat berlaku dengan mengakses kelas yang dibuat terkait dengan elemen dan menetapkannya ke kelas yang berbeda.
Contoh berikut menunjukkan konsep yang dinyatakan.
Contoh
Dalam kode yang diberikan di bawah ini di dalam '
Kemudian dalam kode, sertakan pesan berikut di “ ” untuk menampilkannya di DOM setelah transformasi kelas:
Kode HTML:
< tubuh gaya = 'text-align: tengah;' >< h2 > Ubah Elemen Nama Kelas
Nama kelas lama adalah: kelas default
Dalam kode JS, nyatakan fungsi bernama “ Kelas() ”. Di sini, akses kelas default dengan id-nya menggunakan ' document.getElementById() ' metode. ' nama kelas ” property akan mengubah kelas yang dibuat menjadi kelas bernama “ kelas baru ”.
Akhirnya, “ innertext ” properti akan menampilkan pesan berikut bersama dengan kelas yang diubah:
Kode JS:
fungsi Kelas ( ) {document.getElementById ( 'tombol saya' ) .className = 'Kelas baru' ;
akses var = document.getElementById ( 'tombol saya' ) .nama kelas;
document.getElementById ( 'kepala' ) .innerHTML = 'Nama kelas baru adalah:' + akses;
}
Keluaran
Pada output di atas, amati perubahan ' kelas ” di sebelah kanan setelah mengklik tombol di DOM.
Pendekatan 2: Ubah Kelas Elemen HTML Dengan JavaScript Menggunakan Properti classList
Pendekatan khusus ini dapat diimplementasikan untuk menghapus kelas yang ditentukan dan menetapkan kelas baru untuk itu sehingga mengubahnya.
Contoh
Pertama, ulangi metode yang dibahas di atas untuk menyertakan heading, membuat tombol dengan kelas yang ditetapkan, id, dan event onclick terlampir yang menjalankan fungsi yang ditentukan. Selanjutnya, tambahkan juga bagian heading di “ ” untuk memberi tahu pengguna tentang kelas yang diubah setelah mengklik tombol:
Kode HTML
< tubuh gaya = 'text-align: tengah;' >< h2 > Ubah Kelas Elemen ! h2 >
< tombol kelas = 'Situs web' klik = 'Kelas()' Indo = 'mengubah' > Klik Saya tombol >
< h3 Indo = 'kepala' gaya = 'warna latar: abu-abu muda;' > Nama kelas lama adalah: Situs web h3 >
tubuh >
Sekarang, nyatakan fungsi bernama “ Kelas() ”. Dalam definisinya, terapkan ' daftar kelas ” properti bersama dengan “ menghapus() ” untuk menghilangkan kelas yang diakses bernama “ Situs web ” yang sesuai dengan tombol yang dibuat.
Pada langkah berikutnya, tetapkan kelas baru ke kelas yang sama menggunakan properti yang dibahas dengan ' menambahkan() ' metode. Terakhir, tampilkan kelas yang diubah seperti yang dibahas dalam pendekatan sebelumnya:
Kode JS
fungsi Kelas ( ) {document.getElementById ( 'mengubah' ) .classList.remove ( 'Situs web' )
document.getElementById ( 'mengubah' ) .classList.add ( 'Linux' ) ;
akses var = document.getElementById ( 'mengubah' ) .classList;
document.getElementById ( 'kepala' ) .innerHTML = 'Nama kelas baru adalah:' + akses;
}
Keluaran
Penulisan ini dimaksudkan untuk menghapus konsep mengubah kelas elemen HTML menggunakan JavaScript.
Kesimpulan
' nama kelas ' dan ' daftar kelas Properti ” dapat digunakan untuk mengubah kelas elemen HTML. Properti className menghasilkan pendekatan yang lebih cepat dalam melakukan persyaratan yang diinginkan dibandingkan dengan properti classList karena melibatkan lebih sedikit kerumitan kode. Properti classList, di sisi lain, mengubah kelas default dengan bantuan dua metode tambahan. Artikel ini mengilustrasikan pendekatan untuk mengubah kelas elemen HTML dengan JavaScript.