jQuery 如何在HTML中操作CSS类

在本文中，我们将学习如何使用jQuery在HTML中操作CSS类。

使用jQuery，可以轻松地操作HTML元素的样式。我们有几个用于操作CSS的jQuery方法。让我们逐个讨论它们，并附上适当的示例。

jQuery addClass() 方法

jQuery addClass() 方法用于向所选元素添加一个或多个类。

语法

以下是jQuery addClass() 方法的语法 –

$(selector).addClass(classname);

“classname”是一个必需的参数。它指定要添加的一个或多个类名。

示例

在下面的示例中，我们使用jQuery的addClass()方法为HTML元素添加class属性。

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script>
          $(document).ready(function(){$ ("button").click(function(){
                $("h3").addClass("newclass1");$ ("p").addClass("newclass2");
            });
         });
      </script>
      <style>
         .newclass1 {
            font-size: xx-large;
         }

         .newclass2 {
            font-weight: bold;
            color: seagreen;
         }
      </style>
   </head>
   <body style="text-align: center;">
      <h3>Tutorialspoint</h3>
      <p>Simply Easy Learning at your fingertips.</p>
      <button>Click to add classes to elements</button>
   </body>
</html>

输出

在执行上述程序后，当您点击按钮时，标题和段落元素的样式将根据CSS中指定的属性进行操作。

示例

在这个例子中，我们使用了jQuery的addClass()方法来指定多个类，通过空格分隔类名。

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script>
          $(document).ready(function(){$ ("button").click(function(){
               $("h3, p").addClass("newclass1 newclass2");
            });
         });
      </script>
      <style>
         .newclass1 {
            font-size: xx-large;
            color: seagreen;
         }
      </style>
   </head>
   <body style="text-align: center;">
      <h3>Tutorialspoint</h3>
      <p>Simply Easy Learning at your fingertips.</p>
      <button>Click to add classes to elements</button>
   </body>
</html>

输出

执行上述程序，并点击按钮查看更改。

jQuery removeClass() 方法

jQuery removeClass() 方法从选定的元素中删除一个或多个类。如果不给该方法指定任何参数，它会从选定的元素中删除所有的类名。

语法

以下是 jQuery removeClass() 方法的语法：

$(selector).removeClass(classname);

“classname”是一个必需的参数。它指定要删除的一个或多个类名。

示例

在以下示例中，我们正在从标题和段落元素中删除一个类属性：

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script>
          $(document).ready(function(){$ ("button").click(function(){
               $("h3, p").removeClass("green");
            });
         });
      </script>
      <style>
         .green {
            font-size: xx-large;
            color: seagreen;
         }
      </style>
   </head>
   <body style="text-align: center;">
      <h3 class="green">Tutorialspoint</h3>
      <p class="green">Simply Easy Learning at your fingertips.</p>
      <button>Click to remove classes from elements</button>
   </body>
</html>

输出

执行上述程序并点击按钮查看更改。

jQuery toggleClass() 方法

jQuery toggleClass() 方法在所选元素上添加和删除类之间切换。

语法

以下是 jQuery toggleClass() 方法的语法 −

$(selector).toggleClass(classname);

示例

在下面的例子中，我们尝试使用jQuery的toggleClass()方法在选定的元素之间切换添加/移除类。

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
      <script>
          $(document).ready(function(){$ ("button").click(function(){
               $("h3, p").toggleClass("green");
            });
         });
      </script>
      <style>
         .green {
            font-size: xx-large;
            color: seagreen;
         }
      </style>
   </head>
   <body style="text-align: center;">
      <h3 class="green">Tutorialspoint</h3>
      <p class="green">Simply Easy Learning at your fingertips.</p>
      <button>Click to toggle classes</button>
   </body>
</html>