Ελέγξτε εάν το Body έχει μια συγκεκριμένη κλάση χρησιμοποιώντας JavaScript

Elenxte Ean To Body Echei Mia Synkekrimene Klase Chresimopoiontas Javascript



Κατά τη σχεδίαση μιας ιστοσελίδας ή ενός ιστότοπου, μπορεί να υπάρχει η δυνατότητα ταξινόμησης παρόμοιων λειτουργιών σε σχέση με μια ειδική τάξη στο τέλος του προγραμματιστή. Για παράδειγμα, η κατανομή μιας συγκεκριμένης ιστοσελίδας στο ίδιο στοιχείο αλλά με μια ξεχωριστή κλάση για να γίνουν τα πράγματα σχετικά. Σε τέτοιες περιπτώσεις, ο έλεγχος εάν ένα σώμα έχει μια συγκεκριμένη κλάση βοηθά στην εύκολη πρόσβαση σε διάφορες λειτουργίες καθώς και στις διαδικασίες ενημέρωσης.

Αυτό το άρθρο θα παρουσιάσει τις προσεγγίσεις για να ελέγξετε εάν ένα σώμα έχει μια συγκεκριμένη κλάση χρησιμοποιώντας JavaScript.

Πώς να ελέγξετε εάν το σώμα έχει μια συγκεκριμένη κλάση χρησιμοποιώντας JavaScript;

Για να ελέγξετε εάν ένα σώμα έχει μια συγκεκριμένη κλάση χρησιμοποιώντας JavaScript, εφαρμόστε τις ακόλουθες προσεγγίσεις:





  • ' classList 'περιουσία και' περιέχει() 'μέθοδος.
  • ' getElementsByTagName() ' και ' αγώνας() μεθόδους.
  • ' jQuery '.

Ας παρουσιάσουμε κάθε μία από τις προσεγγίσεις μία προς μία!



Προσέγγιση 1: Ελέγξτε εάν το Body έχει μια συγκεκριμένη κλάση σε JavaScript χρησιμοποιώντας την ιδιότητα classList και περιέχει μεθόδους ()

Ο ' classList Η ιδιότητα ' δίνει τα ονόματα κλάσεων CSS ενός στοιχείου. Ενώ το « περιέχει() Η μέθοδος δίνει αληθές εάν ένας κόμβος είναι απόγονος. Αυτές οι μέθοδοι σε συνδυασμό μπορούν να εφαρμοστούν για πρόσβαση στην περιεχόμενη κλάση στο συσχετισμένο στοιχείο.



Σύνταξη



κόμβος. περιέχει ( γυμνός )

Στην παραπάνω σύνταξη:

  • ' γυμνός ” αντιστοιχεί στον κόμβο απόγονο του συσχετισμένου κόμβου.

Παράδειγμα
Ας κάνουμε μια επισκόπηση του παραδείγματος που δίνεται παρακάτω:



< κέντρο >< σώμα τάξη = 'περιέχω' >
< h2 > Αυτή είναι η ιστοσελίδα Linuxhint h2 >
κέντρο σώμα >
< τύπο σεναρίου = 'κείμενο/javascript' >
αν ( έγγραφο. σώμα . classList . περιέχει ( 'περιέχω' ) ) {
κονσόλα. κούτσουρο ( 'Το στοιχείο του σώματος έχει τάξη' ) ;
}
αλλού {
κονσόλα. κούτσουρο ( 'Το στοιχείο του σώματος δεν έχει τάξη' ) ;
}
γραφή >

Εφαρμόστε τα βήματα που αναφέρονται παρακάτω, όπως δίνονται στον παραπάνω κώδικα:

  • Πρώτον, συμπεριλάβετε ένα ' <σώμα> 'στοιχείο που έχει το χαρακτηριστικό set' τάξη '.
  • Επίσης, προσθέστε μια επικεφαλίδα μέσα στο συγκεκριμένο στοιχείο ( ).
  • Στον κώδικα JS, εφαρμόστε το ' classList ' ακίνητο σε συνδυασμό με το ' περιέχει() 'μέθοδος.
  • Αυτό θα έχει ως αποτέλεσμα πρόσβαση στην κλάση των συσχετισμένων ' <σώμα> ' στοιχείο με βάση το καθορισμένο όνομα κλάσης στην παράμετρο της μεθόδου.
  • Με την ικανοποίηση της συνθήκης, το « αν ' η συνθήκη θα εκτελεστεί.
  • Αντίθετα, το « αλλού Θα εκτελεστεί το μπλοκ κώδικα δήλωσης.

Παραγωγή

Στην παραπάνω έξοδο, φαίνεται ότι η συγκεκριμένη κλάση περιλαμβάνεται στο ' <σώμα> ' στοιχείο.

Προσέγγιση 2: Ελέγξτε εάν το Body έχει μια συγκεκριμένη κλάση σε JavaScript χρησιμοποιώντας μεθόδους getElementsByTagName() και match()

Ο ' getElementsByTagName() Η μέθοδος δίνει μια συλλογή όλων των στοιχείων που έχουν ένα συγκεκριμένο όνομα ετικέτας. Ο ' αγώνας() Η μέθοδος ταιριάζει με την καθορισμένη τιμή με τη συμβολοσειρά. Αυτές οι μέθοδοι μπορούν να χρησιμοποιηθούν για πρόσβαση στο απαιτούμενο στοιχείο από την ετικέτα του και έλεγχο για τη συγκεκριμένη κλάση.

Σύνταξη

έγγραφο. getElementsByTagName ( ετικέτα )

Στην παρεχόμενη σύνταξη:

  • ' ετικέτα ' αντιπροσωπεύει το όνομα της ετικέτας του στοιχείου.

Παράδειγμα
Το ακόλουθο παράδειγμα δείχνει την έννοια που συζητήθηκε:

< κέντρο >< σώμα τάξη = 'περιέχει' >
< img src = 'template2.png' ύψος = '150 px' πλάτος = '150 px' >
κέντρο σώμα >
< τύπο σεναρίου = 'κείμενο/javascript' >
αφήνω παίρνω = έγγραφο. getElementsByTagName ( 'σώμα' ) [ 0 ] . όνομα τάξης . αγώνας ( /περιέχει/ )
αν ( παίρνω ) {
κονσόλα. κούτσουρο ( 'Το στοιχείο του σώματος έχει τάξη' ) ;
}
αλλού {
κονσόλα. κούτσουρο ( 'Το στοιχείο του σώματος δεν έχει τάξη' ) ;
}
γραφή >

Στο παραπάνω απόσπασμα κώδικα:

  • Ομοίως, συμπεριλάβετε ένα ' <σώμα> ' στοιχείο που έχει την καθορισμένη κλάση.
  • Επίσης, περιέχει μια εικόνα με τις καθορισμένες διαστάσεις εντός του δηλωμένου στοιχείου στο προηγούμενο βήμα.
  • Στις γραμμές κώδικα JavaScript, αποκτήστε πρόσβαση στο ' <σώμα> ' στοιχείο από την ετικέτα του χρησιμοποιώντας το ' getElementsByTagName() 'μέθοδος.
  • Ο ' [0] ” υποδηλώνει ότι θα ληφθεί το πρώτο στοιχείο που αντιστοιχεί στη δηλωμένη ετικέτα στο προηγούμενο βήμα.
  • Ο ' όνομα τάξης «περιουσία και το « αγώνας() Η μέθοδος ' θα ταιριάζει για την αναφερόμενη κλάση στην παράμετρό της με την ' <σώμα> ' στοιχείο.
  • Η προηγούμενη δήλωση στο « αν Η συνθήκη θα εκτελεστεί με την ικανοποίηση όλων των συνθηκών στα προηγούμενα βήματα.
  • Διαφορετικά, θα εμφανιστεί η τελευταία δήλωση.

Παραγωγή

Η παραπάνω έξοδος δείχνει ότι η συνθήκη που εφαρμόζεται για μια συγκεκριμένη κλάση ικανοποιείται.

Προσέγγιση 3: Ελέγξτε εάν το Body έχει μια συγκεκριμένη κλάση σε JavaScript χρησιμοποιώντας jQuery

Αυτή η προσέγγιση μπορεί να εφαρμοστεί για την άμεση πρόσβαση στο απαιτούμενο στοιχείο και τον εντοπισμό της συγκεκριμένης κλάσης σε σχέση με αυτό με τη βοήθεια της μεθόδου της απλά.

Παράδειγμα
Ας περάσουμε από το παρακάτω παράδειγμα:

< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' γραφή >
< κέντρο >< σώμα τάξη = 'περιέχει' >
< σύμβολο κράτησης θέσης textarea = 'Πληκτρολογήστε οποιοδήποτε κείμενο...' textarea >
κέντρο σώμα >

αν ( $ ( 'σώμα' ) . hasClass ( 'περιέχει' ) ) {
συναγερμός ( 'Το στοιχείο του σώματος έχει τάξη' )
}
αλλού {
συναγερμός ( 'Το στοιχείο του σώματος δεν έχει τάξη' )
}
γραφή >

Στις παραπάνω γραμμές κώδικα:

  • Συμπεριλάβετε το ' jQuery ” βιβλιοθήκη για να αξιοποιήσει τις λειτουργίες της.
  • Ομοίως, συμπεριλάβετε το « <σώμα> ' στοιχείο που έχει την δηλωμένη κλάση.
  • Επίσης, προσθέστε ένα '