Semak sama ada Badan mempunyai Kelas Tertentu Menggunakan JavaScript

Semak Sama Ada Badan Mempunyai Kelas Tertentu Menggunakan Javascript



Semasa mereka bentuk halaman web atau tapak, terdapat kemungkinan untuk mengisih fungsi yang serupa terhadap kelas khusus di hujung pembangun. Sebagai contoh, memperuntukkan halaman web tertentu kepada elemen yang sama tetapi dengan kelas yang berbeza untuk menjadikan perkara itu relevan. Dalam situasi sedemikian, menyemak sama ada badan mempunyai kelas tertentu membantu dalam mengakses pelbagai fungsi dengan mudah dan dalam proses pengemaskinian juga.

Artikel ini akan menunjukkan pendekatan untuk menyemak sama ada badan mempunyai kelas tertentu menggunakan JavaScript.

Bagaimana untuk Semak sama ada Badan mempunyai Kelas Tertentu Menggunakan JavaScript?

Untuk menyemak sama ada badan mempunyai kelas tertentu menggunakan JavaScript, gunakan pendekatan berikut:





  • “ Senarai kelas ” harta dan “ mengandungi() ” kaedah.
  • “ getElementsByTagName() ” dan “ perlawanan() ” kaedah.
  • “ jQuery ”.

Mari kita gambarkan setiap pendekatan satu demi satu!



Pendekatan 1: Semak sama ada Body mempunyai Kelas Khusus dalam JavaScript Menggunakan ClassList Property dan mengandungi() Kaedah

' Senarai kelas ” property memberikan nama kelas CSS bagi sesuatu elemen. Manakala “ mengandungi() ” kaedah memberikan benar jika nod adalah keturunan. Kaedah gabungan ini boleh digunakan untuk mengakses kelas yang terkandung dalam elemen yang berkaitan.



Sintaks



nod. mengandungi ( telanjang )

Dalam sintaks di atas:

  • “ telanjang ” sepadan dengan keturunan nod nod yang berkaitan.

Contoh
Mari kita lihat gambaran keseluruhan contoh yang diberikan di bawah:



< pusat >< badan kelas = 'mengandungi' >
< h2 > Ini ialah Laman Web Linuxhint h2 >
pusat > badan >
< jenis skrip = 'teks/javascript' >
jika ( dokumen. badan . Senarai kelas . mengandungi ( 'mengandungi' ) ) {
konsol. log ( 'Elemen badan mempunyai kelas' ) ;
}
lain {
konsol. log ( 'Elemen badan tidak mempunyai kelas' ) ;
}
skrip >

Gunakan langkah-langkah yang dinyatakan di bawah, seperti yang diberikan dalam kod di atas:

  • Pertama, masukkan ' 'elemen yang mempunyai atribut set' kelas ”.
  • Selain itu, tambahkan tajuk dalam elemen tertentu( ).
  • Dalam kod JS, gunakan ' Senarai kelas ” harta yang digabungkan dengan “ mengandungi() ” kaedah.
  • Ini akan mengakibatkan akses kepada kelas yang berkaitan ' ” elemen berdasarkan nama kelas yang ditentukan dalam parameter kaedah.
  • Apabila keadaan berpuas hati, ' jika ” syarat akan dilaksanakan.
  • Sebaliknya, ' lain ” blok kod penyata akan dilaksanakan.

Pengeluaran

Dalam output di atas, dapat dilihat bahawa kelas tertentu termasuk dalam ' ” unsur.

Pendekatan 2: Semak sama ada Body mempunyai Kelas Khusus dalam JavaScript Menggunakan Kaedah getElementsByTagName() dan match()

' getElementsByTagName() ” kaedah memberikan koleksi semua elemen yang mempunyai nama tag tertentu. ' perlawanan() ” kaedah sepadan dengan nilai yang ditentukan dengan rentetan. Kaedah ini boleh digunakan untuk mengakses elemen yang diperlukan oleh tegnya dan menyemak kelas tertentu.

Sintaks

dokumen. getElementsByTagName ( tag )

Dalam sintaks yang disediakan:

  • “ tag ” mewakili nama tag elemen.

Contoh
Contoh berikut menunjukkan konsep yang dibincangkan:

< pusat >< badan kelas = 'mengandungi' >
< img src = 'template2.png' ketinggian = '150px' lebar = '150px' >
pusat > badan >
< jenis skrip = 'teks/javascript' >
biarkan dapatkan = dokumen. getElementsByTagName ( 'badan' ) [ 0 ] . Nama kelas . perlawanan ( /mengandungi/ )
jika ( dapatkan ) {
konsol. log ( 'Elemen badan mempunyai kelas' ) ;
}
lain {
konsol. log ( 'Elemen badan tidak mempunyai kelas' ) ;
}
skrip >

Dalam coretan kod di atas:

  • Begitu juga, sertakan ' ” elemen yang mempunyai kelas yang ditentukan.
  • Juga, mengandungi imej dengan dimensi yang ditetapkan dalam elemen yang dinyatakan dalam langkah sebelumnya.
  • Dalam baris kod JavaScript, akses ' elemen ” dengan tagnya menggunakan “ getElementsByTagName() ” kaedah.
  • ' [0] ” menunjukkan bahawa elemen pertama yang sepadan dengan teg yang dinyatakan dalam langkah sebelumnya akan diambil.
  • ' Nama kelas ” harta dan “ perlawanan() kaedah ' akan sepadan dengan kelas yang dinyatakan dalam parameternya terhadap ' ” unsur.
  • Kenyataan terdahulu dalam ' jika ” syarat akan dilaksanakan apabila semua syarat dalam langkah sebelumnya dipenuhi.
  • Jika tidak, pernyataan terakhir akan dipaparkan.

Pengeluaran

Output di atas menunjukkan bahawa syarat yang digunakan untuk kelas tertentu dipenuhi.

Pendekatan 3: Semak sama ada Body mempunyai Kelas Khusus dalam JavaScript Menggunakan jQuery

Pendekatan ini boleh dilaksanakan untuk mengakses elemen yang diperlukan secara langsung dan mencari kelas tertentu terhadapnya dengan bantuan kaedahnya dengan mudah.

Contoh
Mari kita lihat contoh yang diberikan di bawah:

< skrip src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' > skrip >
< pusat >< badan kelas = 'mengandungi' >
< pemegang tempat textarea = 'Taip mana-mana teks...' > textarea >
pusat > badan >

jika ( $ ( 'badan' ) . hasClass ( 'mengandungi' ) ) {
amaran ( 'Elemen badan mempunyai kelas' )
}
lain {
amaran ( 'Elemen badan tidak mempunyai kelas' )
}
skrip >

Dalam baris kod di atas:

  • Sertakan ' jQuery ” perpustakaan untuk menggunakan fungsinya.
  • Begitu juga, sertakan ' ” elemen yang mempunyai kelas yang dinyatakan.
  • Juga, tambahkan '