Manual ini akan menerangkan prosedur menambah kelas aktif dalam JavaScript.
Bagaimana untuk Menambah Kelas Aktif dalam JavaScript?
Untuk menambah kelas aktif, kami akan menggunakan kaedah berikut:
Mari pergi ke kaedah pertama!
Kaedah 1: Gunakan document.getElementById() Dengan kaedah classList.add() untuk Menambah Kelas Aktif dalam JavaScript
Dalam JavaScript, ' document.getElementById() ” kaedah digunakan untuk mengakses elemen tertentu dengan idnya. Walau bagaimanapun, ia hanya memilih elemen berdasarkan id mereka, bukan kelas. Anda boleh menggunakannya dengan ' classList.add() ” kaedah untuk menambah kelas aktif dalam JavaScript.
Mari kita terokai kaedah ini dengan mengambil contoh.
Contoh
Dalam fail HTML kami, kami akan mengambil ' teg ” dengan beberapa teks, nyatakan idnya sebagai “ txt ”, dan tambahkan “ onclick 'peristiwa yang akan mencetuskan' aktifkan() ” fungsi. Ambil perhatian bahawa, tambahkan teg
dalam teg
: < p id = 'txt' onclick = 'aktifkan()' > Ketik Di Sini hlm >Dalam fail JavaScript, tentukan fungsi activate() sedemikian rupa sehingga ia mula-mula mengakses elemen perenggan menggunakan idnya dalam kaedah document.getElementbyId(). Kemudian, tambahkan kelas CSS pada senarai kelasnya untuk tujuan penggayaan:
mengaktifkan fungsi ( ) {
ada = dokumen. getElementById ( 'txt' ) ;
a. Senarai kelas . Tambah ( 'kelas baru' ) ;
}
Dalam fail CSS, letakkan titik sebelum “ kelas baru ” dan tetapkan “ warna latar belakang 'harta benda nilai' oren ”:
. kelas baru {latar belakang - warna : oren ;
}
Akibatnya, apabila anda akan mengklik pada elemen perenggan, sifat latar belakang yang ditambahkan akan digunakan padanya:
Mari kita lihat kaedah berikut di mana kita akan menggunakan document.querySelector() untuk menambah kelas aktif.
Kaedah 2: Gunakan document.querySelector() Dengan kaedah classList.add() untuk Menambah Kelas Aktif dalam JavaScript
Dalam JavaScript, ' document.querySelector() ” kaedah digunakan untuk mendapatkan elemen pertama daripada kod. Anda boleh menentukan kelas dan id kedua-duanya dalam kaedah querySelector(). Ia boleh digunakan dengan ' classList.add() ” kaedah untuk menambah kelas aktif dalam JavaScript.
Contoh
Kami kini hanya akan menggunakan ' document.querySelector() 'dengan id' #txt ” untuk memilih elemen perenggan. Sekali lagi, kaedah classList.add() akan digunakan untuk menambah aktif “ kelas baru ”:
mengaktifkan fungsi ( ) {ada = dokumen. querySelector ( '#txt' ) ;
a. Senarai kelas . Tambah ( 'kelas baru' ) ;
}
Pengeluaran
Kami telah mempelajari dua kaedah paling mudah untuk menambah kelas aktif dalam JavaScript
Kesimpulan
Untuk menambah kelas aktif, kita boleh menggunakan ' getElementById() ” atau “ querySelector() ” dengan kaedah classList.add(). Kedua-dua kaedah yang disebut mendapat elemen mengikut idnya dahulu, kemudian menggunakan kaedah classList.add(), nama kelas baharu yang diberikan kepada elemen yang boleh digunakan untuk tujuan penggayaan. Siaran ini telah menerangkan prosedur yang berkaitan dengan menambah kelas aktif dalam JavaScript.