如何在 JavaScript 中检查给定元素是否具有指定的类？-js教程-PHP中文网

概述

语法

算法

示例1：当元素包含指定类时

示例2：当元素不包含指定类时

结论

" >结论

首页

web前端

js教程

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

王林

Sep 08, 2023 am 08:49 AM

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

概述

要首先执行某个任务，我们需要通过其类或 ID 来访问该特定元素，因此在访问该元素之前，我们检查该类是否存在于该特定元素中。 classList 对象包含 JavScript 中的内置方法 classList.contains()。此方法确定给定元素是否属于指定类。整个过程将会发生，因为首先我们必须通过 getElementById()、getElementsByClassName() 或任何其他方法访问该元素。访问它后，我们必须使用 classList.contains() 方法检查该类。

语法

这个问题使用的语法是 -

classList.contains(className);

登录后复制

classList - 这是 JavaScript 中的一个对象，它接收特定元素中包含的类的数组。
contains - 这是 classList 对象的一个方法，它检查指定的类是否存在于给定元素中。
className - 这是我们必须在给定元素中搜索的指定名称。

算法

步骤 1 - 在 body 标记内创建一些 HTML 元素。为每个元素指定一些类。
步骤 2 - 在 HTML 按钮中指定 onclick() 事件方法。
第 3 步 - 创建 JavaScript 箭头函数。访问任何 HTML 并将其存储在变量中。
步骤 4 - 使用 classList 对象的 contains() 方法。将变量作为参数传递到 contains() 方法中。
步骤 5 - 如果返回 true，则 HTML 元素中存在特定类，否则如果返回 false，则元素中不存在特定类。

示例1：当元素包含指定类时

我们在 body 标签中使用了“

”标签，其中包含类名：class =“my-para first lorems”，所以这些是类名。我们的任务是检查元素以查看它是否包含指定的元素。为此，我们使用了 contains() 方法，它是 classList 对象的方法。因此，我们要检查的类作为参数传递到“contains()”方法中，该方法检查类的确定性。

<!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>

登录后复制

上述示例的输出，因为“Elements contains specified class”的输出为 true。

示例2：当元素不包含指定类时

下图显示“Element 不包含指定的类”，这意味着当检查 classList.contains() 时，它一定返回了 false。因此错误条件已终止。

<!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>

登录后复制

结论

classList的返回类型是DOMTokenList，它是一个数组类型。它包含该特定元素中存在的类的列表。可以通过使用任何 for 循环或映射对其进行迭代来查看 DOMTokenList。

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

登录后复制

“contains()”方法返回布尔类型的结果，为 true 或 false。 classList 对象包含类的数组。因此，当 contains() 方法检查指定的类时，它会检查 DOMTokenList，并代表它做出决定并返回 true 或 false。

以上是如何在 JavaScript 中检查给定元素是否具有指定的类？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7676

CakePHP 教程

1393

C# 教程

1207

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。