Bagaimana untuk Mengubah Kelas Elemen HTML Dengan JavaScript?

Dalam fasa mereka bentuk halaman web atau tapak web, terdapat situasi tertentu di mana anda tidak perlu lagi mengakses beberapa elemen tertentu kerana beberapa kemas kini. Lebih-lebih lagi, apabila terdapat keperluan untuk menetapkan lebih daripada satu kelas kepada elemen tertentu dalam html. Dalam senario kes sedemikian, menukar kelas elemen HTML dalam JavaScript adalah sangat membantu untuk memenuhi situasi sedemikian.

Blog ini akan menunjukkan pendekatan yang perlu dipertimbangkan semasa menukar kelas elemen HTML dalam JavaScript.

Bagaimana untuk Mengubah Kelas Elemen HTML Dengan JavaScript?

Untuk menukar kelas elemen HTML dengan JavaScript, pendekatan berikut boleh digunakan:

• • “ Nama kelas ” harta benda.
  • “ Senarai kelas ” harta benda.

Pendekatan 1: Tukar Kelas Elemen HTML Dengan JavaScript Menggunakan Hartanah className

Pendekatan ini boleh dikuatkuasakan dengan mengakses kelas yang dicipta yang dikaitkan dengan elemen dan memberikannya kelas yang berbeza.

Contoh berikut menunjukkan konsep yang dinyatakan.

Contoh

Dalam kod yang diberikan di bawah dalam ' teg ', sertakan tajuk berikut dalam '

” tag. Selepas itu, buat butang yang ditentukan yang akan diberikan ' lalai ' kelas ” yang akan ditukar kemudian dalam kod. Juga, tetapkan ia ' ID ” dan dilampirkan “ onclick ” acara yang menggunakan fungsi Class().

Kemudian dalam kod, masukkan mesej berikut dalam '

” teg untuk memaparkannya pada DOM selepas perubahan kelas:

Kod HTML:

< badan gaya = 'text-align: center;' >
< h2 > Ubah Elemen Nama Kelas

Nama kelas lama ialah: kelas lalai

Dalam kod JS, isytiharkan fungsi bernama “ Kelas() ”. Di sini, akses kelas lalai dengan idnya menggunakan ' document.getElementById() ” kaedah. ' Nama kelas 'harta benda akan mengubah kelas yang dibuat kepada kelas bernama ' Kelas baru ”.

Akhirnya, ' innerTeks ” property akan memaparkan mesej berikut bersama dengan kelas yang diubah:

Kod JS:

Pengeluaran

Dalam output di atas, perhatikan perubahan ' kelas ” di sebelah kanan apabila mengklik butang dalam DOM.

Pendekatan 2: Tukar Kelas Elemen HTML Dengan JavaScript Menggunakan ClassList Property

Pendekatan khusus ini boleh dilaksanakan untuk mengalih keluar kelas yang ditentukan dan menetapkan kelas baharu kepadanya dengan itu mengubahnya.

Contoh

Pertama, ulangi kaedah yang dibincangkan di atas untuk memasukkan tajuk, mencipta butang dengan kelas yang ditetapkan, id dan acara onclick yang dilampirkan menggunakan fungsi yang ditentukan. Seterusnya, sama tambahkan bahagian tajuk dalam '

teg ” untuk memberitahu pengguna tentang kelas yang diubah apabila butang klik:

Kod HTML

< badan gaya = 'text-align: center;' >
< h2 > Tukar Kelas Unsur ! h2 >
< butang kelas = 'Laman web' onclick = 'Kelas()' ID = 'ubah' > Klik Saya butang >
< h3 ID = 'kepala' gaya = 'warna latar belakang: kelabu muda;' > Nama kelas lama ialah: Laman web h3 >
badan >

Sekarang, isytiharkan fungsi bernama ' Kelas() ”. Dalam definisinya, gunakan ' Senarai kelas ” harta bersama dengan “ keluarkan() ' kaedah untuk meninggalkan kelas diakses bernama ' laman web ” yang sepadan dengan butang yang dibuat.

Dalam langkah seterusnya, tetapkan kelas baharu ke kelas yang sama menggunakan sifat yang dibincangkan dengan “ Tambah() ” kaedah. Akhir sekali, paparkan kelas yang diubah seperti yang dibincangkan dalam pendekatan sebelumnya:

Kod JS

fungsi Kelas ( ) {
document.getElementById ( 'ubah' ) .classList.buang ( 'Laman web' )
document.getElementById ( 'ubah' ) .classList.add ( 'Linux' ) ;
akses var = document.getElementById ( 'ubah' ) .classList;
document.getElementById ( 'kepala' ) .innerHTML = 'Nama kelas baharu ialah:' + akses;
}

Pengeluaran

Tulisan ini bertujuan untuk mengosongkan konsep menukar kelas elemen HTML menggunakan JavaScript.

Kesimpulan

' Nama kelas ” dan “ Senarai kelas ” sifat boleh digunakan untuk menukar kelas elemen HTML. Sifat className membawa kepada pendekatan yang lebih pantas dalam melaksanakan keperluan yang dikehendaki berbanding dengan harta classList kerana ia melibatkan kurang kerumitan kod. Harta classList, sebaliknya, menukar kelas lalai dengan bantuan dua kaedah tambahan. Artikel ini menggambarkan pendekatan untuk menukar kelas elemen HTML dengan JavaScript.