Comment vérifier si un élément donné a une classe spécifiée en JavaScript ?-js tutoriel-php.cn

Comment vérifier si un élément donné a une classe spécifiée en JavaScript ?

王林

Libérer： 2023-09-08 08:49:02

avant

770 Les gens l'ont consulté

如何在 JavaScript 中检查给定元素是否具有指定的类？

Vue d'ensemble

Pour effectuer une certaine tâche, nous devons d'abord accéder à cet élément spécifique par sa classe ou son ID, donc avant d'accéder à cet élément, nous vérifions si la classe existe dans cet élément spécifique. L'objet classList contient la méthode intégrée classList.contains() en JavScript. Cette méthode détermine si l'élément donné appartient à la classe spécifiée. L'ensemble du processus se déroulera car nous devons d'abord accéder à l'élément via getElementById(), getElementsByClassName() ou toute autre méthode. Après y avoir accédé, nous devons vérifier la classe à l’aide de la méthode classList.contains().

Grammaire

La syntaxe utilisée dans cette question est -

classList.contains(className);

Copier après la connexion

classList - Il s'agit d'un objet en JavaScript qui reçoit un tableau de classes contenues dans un élément spécifique.
contains - Il s'agit d'une méthode de l'objet classList qui vérifie si la classe spécifiée est présente dans l'élément donné.
className - C'est le nom spécifié que nous devons rechercher dans l'élément donné.

Algorithme

Étape 1 - Créez des éléments HTML à l'intérieur de la balise body. Attribuez une classe à chaque élément.
Étape 2 - Spécifiez la méthode d'événement onclick() dans le bouton HTML.
Étape 3 - Créez une fonction de flèche JavaScript. Accédez à n’importe quel code HTML et stockez-le dans une variable.
Étape 4 - Utilisez la méthode contain() de l'objet classList. Passez les variables comme arguments à la méthode contain().
Étape 5 - S'il renvoie vrai, alors la classe spécifique existe dans l'élément HTML, sinon s'il renvoie faux, alors la classe spécifique n'existe pas dans l'élément.

Exemple 1 : Lorsque l'élément contient la classe spécifiée

Nous avons utilisé la balise "

" dans la balise body, qui contient le nom de la classe : class = "my-para first lorems", voici donc les noms des classes. Notre tâche est de vérifier un élément pour voir s'il contient l'élément spécifié. Pour ce faire, nous utilisons la méthode contain(), qui est une méthode de l'objet classList. Par conséquent, la classe que nous voulons vérifier est passée en paramètre à la méthode "contains()", qui vérifie la certitude de la classe.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check for specified class in a given element</title>
   <style>
      body{
         background-color: #0a0a0a;
         color: white;
      }
   </style>
</head>
   <body>
      <p id="para" class="my-para first lorems">I am para with certain classes, check now.</p>
      <button onclick="check()" style="margin-bottom: 8px;">Check Now</button><br>
      <div id="output" style="display: inline-block; padding: 0.3rem;"></div>
      
      <script>
         check = () => {
            var ptag = document.getElementById("para");
            var cl = ptag.classList;
            var clContain = cl.contains("my-para");
      
            if (clContain) {
               document.getElementById("output").innerHTML += "Element contains specified  class";
               document.getElementById("output").style.background = "green";
               document.getElementById("output").style.color = "white";
            } else {
               document.getElementById("output").innerHTML += "Element does not contains the specified class";
               document.getElementById("output").style.background = "tomato";
               document.getElementById("output").style.color = "white";
            }
         }
      
      </script>
   </body>
</html>

Copier après la connexion

Le résultat de l'exemple ci-dessus, car le résultat de "Les éléments contiennent la classe spécifiée" est vrai.

Exemple 2 : Lorsque l'élément ne contient pas la classe spécifiée

L'image ci-dessous montre "L'élément ne contient pas la classe spécifiée", ce qui signifie que lorsque classList.contains() est coché, il doit avoir renvoyé false. La condition d’erreur est donc terminée.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check for pecified class in a given element</title>
   <style>
      body{
         background-color: #0a0a0a;
         color: white;
      }
   </style>
</head>
   <body>
      <p id="para" class="my-para first lorems">I am para with certain classes, check now.</p>
      <button onclick="check()" style="margin-bottom: 8px;">Check Now</button><br>
      <div id="output" style="display: inline-block; padding: 0.3rem;"></div>

      <script>
         check = () => {
            var ptag = document.getElementById("para");
            var cl = ptag.classList;
            var clContain = cl.contains("mypara");
      
            if (clContain) {
               document.getElementById("output").innerHTML += "Element contains specified  class";
               document.getElementById("output").style.background = "green";
               document.getElementById("output").style.color = "white";
            } else {
               document.getElementById("output").innerHTML += "Element does not contains the specified class";
               document.getElementById("output").style.background = "tomato";
               document.getElementById("output").style.color = "white";
            }
         }
      </script>
   </body>
</html>

Copier après la connexion

Conclusion

Le type de retour de classList est DOMTokenList, qui est un type de tableau. Il contient la liste des classes présentes dans cet élément particulier. La DOMTokenList peut être visualisée en l'itérant à l'aide de n'importe quelle boucle ou carte.

var ptag = document.getElementById("para").classList;
ptag.forEach(element => {
   console.log(element);
});

Copier après la connexion

La méthode "contains()" renvoie un résultat booléen, qui est vrai ou faux. L'objet classList contient un tableau de classes. Ainsi, lorsque la méthode contain() vérifie la classe spécifiée, elle vérifie la DOMTokenList et prend une décision en son nom et renvoie vrai ou faux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!