点击元素时添加类名，点击元素外部时移除类名

cssweb developmentfront end technology更新于 2024/4/25 6:04:17

有时，我们需要在点击 HTML 元素时高亮显示，并在点击 HTML 元素外部时使其显示正常。我们可以通过切换元素中的类名来实现。这里，切换类名的含义是添加和移除类名。

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

使用 Add() 和 Remove() 方法在点击元素内部和外部时切换类名

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

语法

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

box.addEventListener('click', function () {
   //Add class
});
document.addEventListener('click', function (event) {
   if (event.target !== targeted_element)
   //  Remove class
});

在上述语法中，当用户点击框时，我们会向 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> Toggling the class using the <i> add() and remove() </i> method of JavaScript </h3>
   <div class = "box">  Click on and out the button to toggle the class. </div>
   <script>
      var box = document.querySelector('.box');
      //当用户点击框时添加"内部"类
      box.addEventListener('click', function () {
         box.classList.add('inner');
      });
      //当用户点击框外时删除"内部"类
      document.addEventListener('click', function (event) {
         if (event.target !== box)
         box.classList.remove('inner');
      });
   </script>
</body>
</html>

示例 2

在 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> Toggling the class using the <i> add() and remove() </i> method of JavaScript </h3>
   <div class = "input"> Enter your name </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() 方法在 div 元素中添加一个"clicked"类。
步骤 4 − 将"clickInside"变量的值更改为 true，将"clickOutside"变量的值更改为 false。
步骤 5 − 向 HTML 文档添加一个点击事件监听器。这里，如果"clickoutside"变量的值为 false，且目标元素不是初始 div，则使用 toggleClass() 方法从 div 元素中移除"clicked"类。
步骤 6 - 将"clickOutside"变量的值更改为 true，将"clickInside"变量的值更改为 false。

示例 3

在下面的示例中，我们使用了上面解释的自定义算法，当用户点击类时向 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> Toggling the class using the <i> toggleClass() </i> method of JavaScript </h2>
   <div class = "initial">This is a clickable 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>

用户学习了如何使用各种方法在点击元素时向元素添加类，以及在点击元素外部时从元素中删除类。在第一种方法中，我们使用了 add() 和 remove() 方法。在第二种方法中，我们使用了 toggleClass() 方法。