Periksa apakah Tubuh memiliki Kelas Khusus Menggunakan JavaScript

Periksa Apakah Tubuh Memiliki Kelas Khusus Menggunakan Javascript



Saat mendesain halaman web atau situs, ada kemungkinan untuk mengurutkan fungsionalitas serupa dengan kelas khusus di pihak pengembang. Misalnya, mengalokasikan halaman web tertentu ke elemen yang sama tetapi dengan kelas yang berbeda agar semuanya relevan. Dalam situasi seperti itu, memeriksa apakah suatu badan memiliki kelas tertentu membantu dalam mengakses berbagai fungsi dengan mudah dan juga dalam proses pemutakhiran.

Artikel ini akan mendemonstrasikan pendekatan untuk memeriksa apakah sebuah badan memiliki kelas tertentu menggunakan JavaScript.

Bagaimana Cara Memeriksa apakah Tubuh memiliki Kelas Khusus Menggunakan JavaScript?

Untuk memeriksa apakah suatu badan memiliki kelas tertentu menggunakan JavaScript, terapkan pendekatan berikut:





  • “ Daftar kelas ” properti dan “ mengandung() ' metode.
  • “ getElementsByTagName() ' dan ' cocok() metode.
  • “ jQuery ”.

Mari kita ilustrasikan masing-masing pendekatan satu per satu!



Pendekatan 1: Periksa apakah Badan memiliki Kelas Tertentu dalam JavaScript Menggunakan Properti classList dan Metode berisi ().

“ Daftar kelas ” properti memberikan nama kelas CSS dari suatu elemen. Sedangkan ' mengandung() ” metode memberikan benar jika sebuah node adalah keturunan. Gabungan metode ini dapat diterapkan untuk mengakses kelas yang terkandung dalam elemen terkait.



Sintaksis



simpul. mengandung ( telanjang )

Dalam sintaks di atas:

  • “ telanjang ” sesuai dengan node keturunan dari node terkait.

Contoh
Mari kita ikhtisar contoh yang diberikan di bawah ini:



< tengah >< tubuh kelas = 'berisi' >
< h2 > Ini adalah Situs Web Linuxint h2 >
tengah > tubuh >
< jenis skrip = 'teks/javascript' >
jika ( dokumen. tubuh . Daftar kelas . mengandung ( 'berisi' ) ) {
menghibur. catatan ( 'Elemen tubuh memiliki kelas' ) ;
}
kalau tidak {
menghibur. catatan ( 'Elemen tubuh tidak memiliki kelas' ) ;
}
naskah >

Terapkan langkah-langkah di bawah ini, seperti yang diberikan dalam kode di atas:

  • Pertama, sertakan ' elemen ” yang memiliki atribut set “ kelas ”.
  • Juga, tambahkan tajuk di dalam elemen tertentu ( ).
  • Dalam kode JS, terapkan ' Daftar kelas ” properti digabungkan dengan “ mengandung() ' metode.
  • Ini akan menghasilkan akses ke kelas terkait ' ” elemen berdasarkan nama kelas yang ditentukan dalam parameter metode.
  • Setelah kondisi puas, ' jika ” kondisi akan dieksekusi.
  • Sebaliknya, “ kalau tidak ” blok kode pernyataan akan dijalankan.

Keluaran

Pada keluaran di atas, dapat dilihat bahwa kelas tertentu termasuk dalam “ ” elemen.

Pendekatan 2: Periksa apakah Body memiliki Kelas Tertentu dalam JavaScript Menggunakan Metode getElementsByTagName() dan match()

“ getElementsByTagName() ” metode memberikan kumpulan semua elemen yang memiliki nama tag tertentu. “ cocok() ” Metode cocok dengan nilai yang ditentukan dengan string. Metode-metode ini dapat digunakan untuk mengakses elemen yang diperlukan dengan tag-nya dan memeriksa kelas tertentu.

Sintaksis

dokumen. getElementsByTagName ( menandai )

Dalam sintaks yang disediakan:

  • “ menandai ” mewakili nama tag elemen.

Contoh
Contoh berikut menunjukkan konsep yang dibahas:

< tengah >< tubuh kelas = 'mengandung' >
< img src = 'template2.png' tinggi = '150px' lebar = '150px' >
tengah > tubuh >
< jenis skrip = 'teks/javascript' >
membiarkan Dapatkan = dokumen. getElementsByTagName ( 'tubuh' ) [ 0 ] . nama kelas . cocok ( /mengandung/ )
jika ( Dapatkan ) {
menghibur. catatan ( 'Elemen tubuh memiliki kelas' ) ;
}
kalau tidak {
menghibur. catatan ( 'Elemen tubuh tidak memiliki kelas' ) ;
}
naskah >

Dalam cuplikan kode di atas:

  • Demikian juga, sertakan ' ” elemen memiliki kelas yang ditentukan.
  • Juga, isi gambar dengan dimensi yang ditetapkan di dalam elemen yang disebutkan di langkah sebelumnya.
  • Di baris kode JavaScript, akses “ ” elemen dengan tagnya menggunakan “ getElementsByTagName() ' metode.
  • “ [0] ” menunjukkan bahwa elemen pertama yang sesuai dengan tag yang disebutkan pada langkah sebelumnya akan diambil.
  • “ nama kelas ' properti dan ' cocok() ” metode akan cocok dengan kelas yang dinyatakan dalam parameternya terhadap “ ” elemen.
  • Pernyataan sebelumnya di “ jika ” kondisi akan dieksekusi setelah semua kondisi pada langkah sebelumnya terpenuhi.
  • Jika tidak, pernyataan terakhir akan ditampilkan.

Keluaran

Output di atas menunjukkan bahwa kondisi yang diterapkan untuk kelas tertentu terpenuhi.

Pendekatan 3: Periksa apakah Body memiliki Kelas Tertentu dalam JavaScript Menggunakan jQuery

Pendekatan ini dapat diimplementasikan untuk mengakses elemen yang diperlukan secara langsung dan menempatkan kelas tertentu di atasnya dengan bantuan metodenya secara sederhana.

Contoh
Mari kita lihat contoh yang diberikan di bawah ini:

< skrip src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' > naskah >
< tengah >< tubuh kelas = 'mengandung' >
< placeholder textarea = 'Ketik teks apa saja...' > textarea >
tengah > tubuh >

jika ( $ ( 'tubuh' ) . hasClass ( 'mengandung' ) ) {
peringatan ( 'Elemen tubuh memiliki kelas' )
}
kalau tidak {
peringatan ( 'Elemen tubuh tidak memiliki kelas' )
}
naskah >

Pada baris kode di atas:

  • Sertakan “ jQuery ” perpustakaan untuk memanfaatkan fungsinya.
  • Demikian pula, sertakan ' ” elemen memiliki kelas yang dinyatakan.
  • Juga, tambahkan '