如何在 JavaScript 中切换元素类？

切换类意味着如果没有为元素分配类名，则可以动态地为其分配类名，或者如果某个类已经存在，则可以仅使用toggle()或使用JavaScript 中 DOMTokenList 对象的contains()、add()、remove()方法。

正在使用的 HTML 元素的属性：

• classList：此属性返回元素的类名作为 DOMTokenList 对象。这个对象有一些众所周知的方法，包括contains()、add()、remove()、toggle() 。
• contains()：此方法返回一个布尔值，指示是否存在特定的类名。
• add()：此方法用于向元素添加一个或多个类名。
• remove()：此方法用于从元素中删除一个或多个类名。
• toggle()：该方法属于 DOMTokenList 对象，用于在类之间切换

方法一：通过使用toggle()方法：让我们首先制作一个包含段落标签和按钮标签的HTML文件模板。之后，让我们为要切换的类应用一些样式。在我们的例子中，类名是“paragraphClass”，按钮的ID 是“Button”。将此代码复制到 html 页面的中。

现在，让我们编写用于切换类的脚本。以下是脚本，将写入 html 页面的内。在这个方法中，我们将使用toggle()函数来切换类名。

    function myFunc() {
        var para = document.getElementById("p");
        para.classList.toggle("paragraphClass");
    }

示例：让我们通过组合上述所有概念来了解工作示例。

    
    Geeks for Geeks
    
        .paragraphClass {
            font-size: 30px;
            color: red;
        }
  
        #Button {
            margin-top: 15px;
        }
    
  
    
        function myFunc() {
            var para = document.getElementById("p");
            para.classList.toggle("paragraphClass");
        }
    

  

    
        Click on the button to toggle
        between the class to see the
        effects 
    
  
    
        Click Me
    

  

输出：

• 不点击按钮：
  
  
• 单击按钮一次后：
  
  
• 单击按钮两次后：
  
  

方法2：通过使用contains()、add()和remove()方法：让我们首先制作一个包含段落标签和按钮标签的HTML文件模板。之后，让我们为要切换的类应用一些样式。在我们的例子中，类名是“paragraphClass”，按钮的ID 是“Button”。将此代码复制到 html 页面的中。

现在，让我们编写用于切换类的脚本。以下是脚本，将写入 html 页面的中。在这个方法中，我们将使用contains()、add()、remove()方法来切换类名。这里的技巧是我们将使用contains()方法检查特定类是否存在，然后我们将分别使用add()或remove()从元素中添加或删除类名。

function myFunc() {
    var para = document.getElementById("p");

    if(para.classList.contains("paragraphClass")) {
        para.classList.remove("paragraphClass");
    }
    else {
        para.classList.add("paragraphClass");
    }
}

示例：让我们通过组合上述所有概念来了解工作示例。

    
    Geeks for Geeks
    
        .paragraphClass {
            font-size: 30px;
            color: red;
        }
  
        #Button {
            margin-top: 15px;
        }
    
  
    
        function myFunc() {
            var para = document.getElementById("p");
  
            if(para.classList.contains("paragraphClass")) {
                para.classList.remove("paragraphClass");
            }
            else {
                para.classList.add("paragraphClass");
            }
        }
    

  

    
        Click on the button to toggle
        between the class to see the
        effects
    
  
    
        Click Me
    

  

输出：

• 不点击按钮：
  
  
• 单击按钮一次后：
  
  
• 单击按钮两次后：