点击元素时添加类名，点击元素外部时删除类名来切换类

有时，我们需要在点击HTML元素时将其突出显示，在点击HTML元素外部时将其恢复正常。我们可以通过在元素中切换类来实现。在这里，“切换类”的意思是添加和删除类。

在本教程中，我们将学习如何在用户单击元素时将类名添加到元素中，并在用户单击元素外部时从元素中删除类名。

使用add()和remove()方法来切换元素内部和外部单击时的类

在JavaScript中，add()方法用于将元素添加到数组中，remove()方法用于将元素从数组中删除。在这里，我们将访问特定HTML元素的类列表，它是一个数组。此外，我们将使用在类列表中添加和删除类的add()和remove()方法来添加和删除HTML元素的类。

语法

用户可以按照以下语法使用add()和remove()方法，在单击元素时添加类，并在单击元素外部时删除类。

box.addEventListener('click', function () {
   //添加类
});
document.addEventListener('click', function (event) {
   if (event.target !== targeted_element)
   //删除类
});

在上述语法中，当用户单击盒子时，我们添加一个类到classList中，并在用户单击元素外部时删除类。

示例1

在下面的示例中，我们有一个带有“box”类名的div元素。我们使用CSS应用了一些“box”类的样式。此外，我们在“inner”类中添加了一些CSS属性。

在JavaScript中，当用户单击盒子时，我们将“inner”类添加到盒子元素中。此外，在回调函数中，我们检查目标元素是否为盒子。如果我们不从箱子中删除“inner”类，则删除“inner”类。

<html>
<head>
   <style>
      .inner {
         width: 450px;
         height: 200px;
         background-color: red !important;
         color: white !important;
         padding: 10px;
         border-radius: 5px;
         font-size: 30px !important;
         font-weight: bold;
         text-align: center;
      }
      .box {
         width: 500px;
         height: 200px;
         border: 2px solid green;
         color: blue;
         font-size: 1rem;
      }
   </style>
</head>
<body>
   <h3>使用JavaScript的add()和remove()方法切换类</h3>
   <div class = "box">单击按钮来切换类。 </div>
   <script>
      var box = document.querySelector('.box');
      //当用户单击盒子时添加 'inner' 类
      box.addEventListener('click', function () {
         box.classList.add('inner');
      });
      //当用户单击盒子外部时删除 'inner' 类
      document.addEventListener('click', function (event) {
         if (event.target !== box)
         box.classList.remove('inner');
      });
   </script>
</body>
</html>

例子二

在HTML中，当您单击输入框时，它会突出显示输入框，并且当您单击输入框外部时，它会从输入框中删除突出显示器。

在下面的示例中，我们将创建一个自定义输入框，当用户单击输入框时可以将其突出显示。

在这里，当用户单击div元素时，我们向div元素添加“active”类，当用户单击输入框外部时，我们将删除“active”类。

<html>
<head>
   <style>
      .input {
         width: 400px;
         height: 30px;
         border: 1px solid grey;
         color: grey;
         padding: 5px;
      }
      .active {
         border: 2px solid blue !important;
         color: blue;
      }
   </style>
</head>
<body>
   <h3>使用JavaScript中的`add()`和`remove() `函数切换类</h3>
   <div class = "input"> 输入您的姓名</div>
   <script>
      var input = document.querySelector('.input');
      input.addEventListener('click', function () {
         input.classList.add('active');
      });
      document.addEventListener('click', function (event) {
         if (event.target !== input)
         input.classList.remove('active');
      });
   </script>
</body>
</html>

使用`ToggleClass()`方法

toggleClass()方法允许用户添加和删除HTML元素的类。在这里，我们将在用户单击元素时添加类，并在用户单击元素外部时删除类。

语法

用户可以按照以下语法使用toggleClass()方法添加和删除元素的类。

initial.classList.toggle('clicked');

在以上语法中，“initial”是在JavaScript中访问的HTML元素。它向HTML元素添加和删除“clicked”类。

步骤

步骤1 −定义“clickInside”和“clickOutside”变量，并将它们用true和false值初始化。
步骤2 −在JavaScript中访问div元素并添加点击事件侦听器。
步骤3 −在事件侦听器的回调函数中，如果“clickInside”为false，则表示用户上次单击了外部。因此，我们需要使用toggleClass()方法将“clicked”类添加到div元素中。
步骤4 −将“clickInside”变量的值更改为true，将“clickOutside”变量的值更改为false。
步骤5 −将点击事件侦听器添加到HTML文档中。在这里，如果“clickoutside”变量的值为false，并且目标元素不是初始div，则使用toggleClass()方法从div元素中删除“clicked”类。
步骤6 −将“clickOutside”变量的值更改为true，将“clickInside”变量的值更改为false。

例子三

在下面的示例中，我们使用上述自定义算法，在用户单击元素时将类添加到HTML元素中，并使用toggleClass()方法在用户单击元素外部时从HTML元素中删除类。

在输出中，用户可以注意到它更改了尺寸和字体颜色。当他们单击div元素时，以及当用户单击div元素之外时，它会变为普通状态。

<html>
<head>
   <style>
      .initial {
         width: 400px;
         height: 250px;
         border: 1px solid grey;
         color: grey;
         padding: 5px;
         font-size: 3rem;
      }
      .clicked {
         color: red !important;
         border: 1px solid red !important;
         width: 500px;
         height: 200px;
      }
   </style>
</head>
<body>
   <h2>使用JavaScript中的`toggleClass()`方法切换类</h2>
   <div class = "initial">这是可以点击的div</div>
   <script>
      var initial = document.querySelector('.initial');

      // 可点击变量的初始值
      var clickedInside = false;
      var clickedOutside = true;
      initial.addEventListener('click', function () {
         if (!clickedInside) {
            initial.classList.toggle('clicked');
            clickedInside = true;
            clickedOutside = false;
         }
      });
      document.addEventListener('click', function (event) {
         if (event.target !== initial && !clickedOutside) {
            initial.classList.toggle('clicked');
            clickedInside = false;
            clickedOutside = true;
         }
      });
   </script>
</body>
</html>