Verificați dacă Body are o anumită clasă folosind JavaScript

Verificati Daca Body Are O Anumita Clasa Folosind Javascript



În timpul proiectării unei pagini web sau a site-ului, poate exista posibilitatea de a sorta funcționalități similare față de o clasă dedicată la sfârșitul dezvoltatorului. De exemplu, alocarea unei anumite pagini web aceluiași element, dar cu o clasă distinctă pentru a face lucrurile relevante. În astfel de situații, verificarea dacă un organism are o anumită clasă ajută la accesarea cu ușurință a diverselor funcționalități și la procesele de actualizare.

Acest articol va demonstra abordările pentru a verifica dacă un corp are o anumită clasă folosind JavaScript.

Cum se verifică dacă Body are o anumită clasă folosind JavaScript?

Pentru a verifica dacă un corp are o anumită clasă folosind JavaScript, aplicați următoarele abordări:





  • „ classList „proprietate și „ conține() ” metoda.
  • „ getElementsByTagName() ' și ' Meci() ” metode.
  • „ jQuery ”.

Să ilustrăm fiecare dintre abordări una câte una!



Abordarea 1: Verificați dacă Corpul are o clasă specifică în JavaScript Folosind proprietatea classList și metodele conține()

„ classList ” proprietatea oferă numele clasei CSS ale unui element. Întrucât ' conține() ” metoda dă adevărat dacă un nod este descendent. Aceste metode combinate pot fi aplicate pentru a accesa clasa conținută în elementul asociat.



Sintaxă



nodul. conţine ( gol )

În sintaxa de mai sus:

  • „ gol ” corespunde nodului descendent al nodului asociat.

Exemplu
Să avem o privire de ansamblu asupra exemplului de mai jos:



< centru >< corp clasă = 'conține' >
< h2 > Acesta este site-ul Linuxhint h2 >
centru > corp >
< tip de script = „text/javascript” >
dacă ( document. corp . classList . conţine ( 'conține' ) ) {
consolă. Buturuga ( „Elementul corpului are clasă” ) ;
}
altfel {
consolă. Buturuga ( „Elementul corpului nu are clasă” ) ;
}
scenariu >

Aplicați pașii de mai jos, așa cum sunt indicați în codul de mai sus:

  • În primul rând, includeți un „ „element având atributul set „ clasă ”.
  • De asemenea, adăugați un titlu în cadrul unui anumit element ().
  • În codul JS, aplicați „ classList ” proprietate combinată cu ” conține() ” metoda.
  • În consecință, acest lucru va avea acces la clasa asociată „ ” element bazat pe numele clasei specificat în parametrul metodei.
  • La condiția îndeplinită, „ dacă ” condiția se va executa.
  • Dimpotrivă, „ altfel ” se va executa blocul de cod de instrucțiune.

Ieșire

În rezultatul de mai sus, se poate vedea că clasa anume este inclusă în „ ' element.

Abordarea 2: verificați dacă Corpul are o clasă specifică în JavaScript folosind metodele getElementsByTagName() și match()

„ getElementsByTagName() ” metoda oferă o colecție de toate elementele care au un anumit nume de etichetă. „ Meci() ” metoda potrivește valoarea specificată cu șirul. Aceste metode pot fi utilizate pentru a accesa elementul necesar prin eticheta sa și pentru a verifica clasa specifică.

Sintaxă

document. getElementsByTagName ( etichetă )

În sintaxa furnizată:

  • „ etichetă ” reprezintă numele etichetei elementului.

Exemplu
Următorul exemplu demonstrează conceptul discutat:

< centru >< corp clasă = 'contine' >
< img src = „template2.png” înălţime = '150px' lăţime = '150px' >
centru > corp >
< tip de script = „text/javascript” >
lăsa obține = document. getElementsByTagName ( 'corp' ) [ 0 ] . numele clasei . Meci ( /contine/ )
dacă ( obține ) {
consolă. Buturuga ( „Elementul corpului are clasă” ) ;
}
altfel {
consolă. Buturuga ( „Elementul corpului nu are clasă” ) ;
}
scenariu >

În fragmentul de cod de mai sus:

  • De asemenea, includeți un „ ” element având clasa specificată.
  • De asemenea, conține o imagine cu dimensiunile setate în cadrul elementului menționat în pasul anterior.
  • În liniile de cod JavaScript, accesați „ ” elementul prin eticheta sa folosind „ getElementsByTagName() ” metoda.
  • „ [0] ” indică faptul că primul element corespunzător etichetei menționate la pasul anterior va fi preluat.
  • „ numele clasei „proprietatea și „ Meci() ” metoda se va potrivi pentru clasa menționată în parametrul său cu „ ' element.
  • Prima declarație din „ dacă ” condiția se va executa la îndeplinirea tuturor condițiilor din etapele anterioare.
  • În caz contrar, va fi afișată ultima declarație.

Ieșire

Ieșirea de mai sus indică faptul că condiția aplicată pentru o anumită clasă este îndeplinită.

Abordarea 3: Verificați dacă Body are o clasă specifică în JavaScript folosind jQuery

Această abordare poate fi implementată pentru a accesa elementul necesar direct și pentru a localiza clasa specifică împotriva acestuia cu ajutorul metodei sale simplu.

Exemplu
Să trecem prin exemplul de mai jos:

< script src = „https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > scenariu >
< centru >< corp clasă = 'contine' >
< substituent zona textului = „Tastați orice text...” > zona textului >
centru > corp >

dacă ( $ ( 'corp' ) . areClass ( 'contine' ) ) {
alerta ( „Elementul corpului are clasă” )
}
altfel {
alerta ( „Elementul corpului nu are clasă” )
}
scenariu >

În rândurile de cod de mai sus:

  • Includeți „ jQuery ” pentru a-și utiliza funcționalitățile.
  • În mod similar, includeți „ ” element având clasa declarată.
  • De asemenea, adăugați un „