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

首页

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 id="Using-the-i-toggle-method-i-to-toggle-and-element-class-using-JavaScript">Using the <i> toggle() method </i> to toggle and element class using JavaScript.</h2>
   <h3 id="Click-the-below-button-to-add-and-remove-the-class-from-the-below-div">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 id="Using-the-i-contains-add-and-remove-method-i-to-toggle-and-element-class-using-JavaScript">Using the <i> contains(), add(), and remove() method </i> to toggle and element class using JavaScript. </h2>
   <h3 id="Click-the-below-button-to-add-and-remove-the-circle-class-from-the-below-div">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 id="Using-the-i-JQuery-s-toggleClass-method-i-to-toggle-and-element-class-using-JQUery">Using the <i> JQuery's toggleClass() method </i> to toggle and element class using JQUery. </h2>
   <h3 id="Click-the-below-button-toggle-text-color-class-from-the-below-span-element">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中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。