如何使用 jQuery 在 HTML 中操作 CSS 类?

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

使用 jQuery 可以轻松操作 HTML 元素的样式。我们提供多种用于操作 CSS 的 jQuery 方法。我们将通过合适的示例逐一讨论它们。

jQuery addClass() 方法

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

语法

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

$(selector).addClass(classname);

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

示例

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

<!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>

输出

执行上述程序，然后点击按钮即可查看切换。

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/