通过在单击元素时添加类名并在外部单击时删除来切换类

在本文中，任务是在单击该元素时切换 CSS 类，并在单击该元素外（即 HTML 文档中的任何其他位置）时删除该特定类。

方法：这可以通过以下步骤在 JavaScript 的帮助下轻松完成：

• 我们将首先使用 querySelector() 方法选择必须在其上切换类的元素和整个 HTML 文档。
• 接下来，我们需要将 ‘click’ 事件侦听器添加到两个选定的元素。
• 在要单击的元素的事件侦听器中，我们将使用 classList.add() 方法添加所需的 CSS 类。
• 在 HTML 文档的事件侦听器中，我们将首先检查单击的目标是否是上述所需元素，然后使用 classList.remove() 方法删除类，从而在单击上述元素外时切换类。

示例：在此示例中，在 HTML 文档中定义了一个按钮，一旦单击该按钮，就会在其上添加“活动”CSS 类。一旦我们单击 HTML 文档中的任意位置，这个“活动”类也将从按钮中删除。

HTML

  

    
        button {
            background-color: green;
            color: white;
            padding: 10px 24px;
            font-size: 18px;
            border: none;
            font-weight: bold;
            transition: all 0.4s;
            margin: 300px;
        }
  
        .active {
            background-color: black;
        }
    

  

    GeeksforGeeks
  
    
        // Select the button on which the
        // class has to be toggled
        const btn = document.querySelector("button");
  
        // Select the entire HTML document
        const html = document.querySelector("html");
  
        // Add an event listener for 
        // a click to the button
        btn.addEventListener("click", function (e) {
  
            // Add the required class
            btn.classList.add("active");
        });
  
        // Add an event listener for a
        // click to the html document
        html.addEventListener("click", function (e) {
  
            // If the element that is clicked on is
            // not the button itself, then remove
            // the class that was added earlier
            if (e.target !== btn)
                btn.classList.remove("active");
        });
    

  

输出：