Manual ini akan menjelaskan prosedur penambahan kelas aktif dalam JavaScript.
Bagaimana Cara Menambahkan Kelas Aktif di JavaScript?
Untuk menambahkan kelas aktif, kami akan menggunakan metode berikut:
Mari menuju ke metode pertama!
Metode 1: Gunakan document.getElementById() Dengan Metode classList.add() untuk Menambahkan Kelas Aktif di JavaScript
Dalam JavaScript, ' document.getElementById() ” digunakan untuk mengakses elemen tertentu dengan id-nya. Namun, itu hanya memilih elemen berdasarkan id mereka, bukan kelas. Anda dapat menggunakannya dengan ' daftar kelas.tambahkan() ” metode untuk menambahkan kelas aktif dalam JavaScript.
Mari kita jelajahi metode ini dengan mengambil contoh.
Contoh
Dalam file HTML kami, kami akan mengambil ' ” dengan beberapa teks, tentukan id-nya sebagai “ txt ”, dan tambahkan “ klik ” yang akan memicu “ mengaktifkan() ' fungsi. Perhatikan bahwa, tambahkan tag
di dalam tag
: < p id = 'txt' klik = 'mengaktifkan()' > Ketuk Di Sini p >Dalam file JavaScript, definisikan fungsi Activate() sedemikian rupa sehingga pertama kali mengakses elemen paragraf menggunakan id-nya dalam metode document.getElementbyId(). Kemudian, tambahkan kelas CSS ke daftar kelasnya untuk tujuan penataan:
fungsi aktif ( ) {
ada sebuah = dokumen. getElementById ( 'txt' ) ;
sebuah. daftar kelas . menambahkan ( 'kelas baru' ) ;
}
Di file CSS, tempatkan titik sebelum “ kelas baru ” dan menetapkan “ warna latar belakang ”properti sebuah nilai” jeruk ”:
. kelas baru {Latar Belakang - warna : jeruk ;
}
Akibatnya, ketika Anda akan mengklik elemen paragraf, properti latar belakang yang ditambahkan akan diterapkan padanya:
Mari kita lihat metode berikut di mana kita akan menggunakan document.querySelector() untuk menambahkan kelas aktif.
Metode 2: Gunakan document.querySelector() Dengan classList.add() Metode untuk Menambahkan Kelas Aktif di JavaScript
Dalam JavaScript, ' document.queryPemilih() Metode ” digunakan untuk mendapatkan elemen pertama dari kode. Anda dapat menentukan kelas dan id dalam metode querySelector(). Dapat digunakan dengan “ daftar kelas.tambahkan() ” metode untuk menambahkan kelas aktif dalam JavaScript.
Contoh
Kami sekarang hanya akan menggunakan ' document.queryPemilih() ” dengan identitas” #txt ” untuk memilih elemen paragraf. Sekali lagi, metode classList.add() akan digunakan untuk menambahkan “aktif” kelas baru ”:
fungsi aktif ( ) {ada sebuah = dokumen. kueriPemilih ( '#txt' ) ;
sebuah. daftar kelas . menambahkan ( 'kelas baru' ) ;
}
Keluaran
Kami telah mempelajari dua metode paling sederhana untuk menambahkan kelas aktif di JavaScript
Kesimpulan
Untuk menambahkan kelas aktif, kita dapat memanfaatkan “ getElementById() ' atau ' kueriPemilih() ” dengan metode classList.add(). Kedua metode yang disebutkan mendapatkan elemen dengan id mereka terlebih dahulu, kemudian menggunakan metode classList.add() , nama kelas baru yang ditetapkan ke elemen yang dapat digunakan untuk tujuan penataan gaya. Posting ini telah menjelaskan prosedur yang terkait dengan menambahkan kelas aktif dalam JavaScript.