如何在 JavaScript 中切换元素类？-js教程-PHP中文网

使用classList的toggle()方法

语法

示例 3

使用 contains()、add() 和 remove() 方法

使用JQuery的toggleClass()方法

首页

web前端

js教程

如何在 JavaScript 中切换元素类？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 05:29 PM

如何在 JavaScript 中切换元素类？

切换元素类意味着根据特定条件从 HTML 元素中添加和删除特定类。

例如，我们要突出显示 HTML div 元素，当鼠标进入时，我们需要在 HTML 元素中添加具有不同样式的特定类。

在这里，我们将学习使用 JavaScript 和 jQuery 切换元素类的各种方法。在本教程中，我们将学习在 JavaScript 中切换元素类。

使用classList的toggle()方法

toggle() 方法切换元素中的类。它检查该类是否存在，然后删除该类；否则，它将类添加到元素中。

语法

用户可以按照以下语法使用toggle()方法通过JavaScript切换元素类。

divElement.classList.toggle("class_name");

登录后复制

在上面的语法中，divElement 是一个 HTML 元素，我们想要在其中切换作为切换方法的参数传递的类。

示例 1

在下面的示例中，我们创建了 div 元素并给出了一些样式。当用户单击该按钮时，它会调用toggleClass() 函数。在toggleClass()函数中，我们使用div元素的id访问了它。

之后，我们将toggle()方法应用到div元素的classList上。 classList 属性以数组格式返回所有 div 元素的类。此外，我们还传递了“color”类名作为toggle()方法的参数。因此，它将在 div 元素中添加和删除颜色类。

<html>
<head>
   <style>
      div {
         width: 10rem;
         height: 10rem;
         border: 2px solid blue;
         border-radius: 12px;
      }
      .color {
         background-color: grey;
      }
   </style>
</head>
<body>
   <h2>Using the <i> toggle() method </i> to toggle and element class using JavaScript.</h2>
   <h3>Click the below button to add and remove the class from the below div.</h3>
   <div id="div-ele"></div>
   <br>
   <button onClick="toggleClass()">Toggle color class</button>
   <script>
      function toggleClass() {
         let divElement = document.getElementById('div-ele');
         divElement.classList.toggle("color");
      }
   </script>
</body>
</html>

登录后复制

在上面的输出中，用户可以观察到，当我们单击按钮时，它会更改 div 元素的背景颜色，因为它会切换 div 元素的颜色类别。

使用 contains()、add() 和 remove() 方法

contains 方法检查数组是否包含特定元素。 add() 方法将类添加到元素，remove() 方法从元素中删除类。

我们可以使用 classList 属性获取元素包含的所有类，然后我们可以使用 contains() 方法来检查元素是否包含特定类。如果不包含我们可以添加；否则，我们需要删除该类。

语法

用户可以按照以下语法使用 contains()、add() 和 remove() 方法来切换元素的类。

if (divElement.classList.contains("class_name")) {
   divElement.classList.remove("circle");
} else {
   divElement.classList.add("circle");
}

登录后复制

在上面的语法中，我们使用 contains() 方法检查 classList 是否包含 class_name 类，并基于此，我们从元素中添加和删除该类。

示例 2

在下面的示例中，我们为 div 元素赋予了一些样式。此外，我们还创建了“circle”类，它将 div 转换为圆形。每当用户单击按钮时，toggleClass() 函数都会检查 div 元素是否包含“circle”类。如果 contains() 方法对 Circle 类返回 true，我们将使用带有 classList 的 remove() 方法从 div 中删除 Circle 类。否则，我们使用 add() 方法在 div 元素中添加“circle”类。

<html>
<head>
   <style>
      div {
         width: 10rem;
         height: 10rem;
         border: 2px solid yellow;
         background-color: blue;
         display: flex;
         justify-content: center;
         align-items: center;
         color: white;
         font-size: larger;
      }
      .circle {
         border-radius: 50%;
      }
   </style>
</head>
<body>
   <h2>Using the <i> contains(), add(), and remove() method </i> to toggle and element class using JavaScript. </h2>
   <h3>Click the below button to add and remove the circle class from the below div. </h3> 
   <div id="div-ele">
      Square
   </div>
   <br>
   <button onClick="toggleClass()">Toggle color class</button>
   <script>
      function toggleClass() {
         let divElement = document.getElementById('div-ele');
         let allClass = divElement.classList;
         
         // if the element contains the circle class, remove it; Otherwise, add it.
         if (allClass.contains("circle")) {
            divElement.classList.remove("circle");
            divElement.innerHTML = "Square";
         } else {
            divElement.classList.add("circle");
            divElement.innerHTML = "Circle";
         }
      }
   </script>
</body>
</html>

登录后复制

在上面的输出中，用户只要单击按钮就可以观察到 div 在圆形和方形之间切换。

使用JQuery的toggleClass()方法

JQuery 包含toggleClass() 方法，其工作方式与JavaScript 的toggle() 方法相同。我们可以将 HTML 元素作为toggleClass() 方法的引用，并将类名作为参数传递。

语法

用户可以按照下面的语法使用JQuery的toggleClass()方法来切换元素类。

$(element).toggleClass("class_name");

登录后复制

在上述语法中，用户应将元素替换为元素 id、类或标签，以使用 JQuery 访问该元素。 class_name 是要切换参考元素的类名称。

示例 3

在下面的示例中，我们通过使用 JQuery 的toggleClass() 方法切换元素的 text_color 类来更改元素文本的颜色。

在输出中，用户可以观察到只要按下按钮，它就会在红色和默认颜色之间切换 span 元素的文本颜色。

<html>
<head>
   <style>
      .text_color {
         color: red;
      }
   </style>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h2>Using the <i> JQuery's toggleClass() method </i> to toggle and element class using JQUery. </h2>
   <h3>Click the below button toggle text_color class from the below span element.</h3>
   <span>This is a sample text.</span>
   <br>
   <br>
   <button onClick="toggleClass()">Toggle color class</button>
   <script>
      function toggleClass() {
         $("span").toggleClass("text_color");
      }
   </script>
</body>
</html>

登录后复制

我们学习了使用 JavaScript 和 JQuery 切换元素类的三种方法。当用户想要在 JavaScript 中编写代码时，可以使用toggle() 方法；当用户想要使用JQuery 编写代码时，可以使用toggleClass() 方法。

以上是如何在 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邮箱登陆入口在哪里

7708

Java教程

1640

CakePHP 教程

1394

Laravel 教程

1288

PHP教程

1232

显示更多

Related knowledge

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

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

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

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