jQuery - CSS 类

jQuery 提供了三种方法：addClass()、removeClass() 和 toggleClass() 来操作元素的 CSS 类。

我们将 CSS 操作的讨论分为两部分。本章将讨论操作 CSS 类，下一章将讨论操作 CSS 属性。

jQuery - 添加 CSS 类

jQuery 提供了 addClass() 方法来向匹配的 HTML 元素添加 CSS 类。以下是 addClass() 方法的语法：

$(selector).addClass(className);

此方法接受一个参数，该参数是一个或多个用空格分隔的类，将添加到每个匹配元素的 class 属性中。可以一次添加多个类，用空格分隔，添加到匹配元素集中，如下所示：

$(selector).addClass("Class1 Class2");

概要

考虑以下带有定义的 CSS 类的 HTML 内容：

<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
<body>
<div class="container">
   <h2>jQuery addClass() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>
</body>

现在，如果我们使用 addClass() 方法如下：

$( ".hello" ).addClass("big" );
$( ".goodbye" ).addClass("small" );

它将产生以下结果：

<body>
<div class="container">
   <h2>jQuery addClass() Method</h2>
   <div class="hello big">Hello</div>
   <div class="goodbye small">Goodbye</div>
</div>
</body>

请注意，addClass() 方法不会替换现有类，而只是添加类，将其附加到可能已分配给元素的任何类。

示例

让我们尝试以下示例并验证结果：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).addClass("big" );
         $( ".goodbye" ).addClass("small" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
</head>
<body>
   <div class="container">
      <h2>jQuery addClass() Method</h2>
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>
   
   <button>Add Class</button>
</body>
</html>

jQuery - 删除 CSS 类

jQuery 提供了 removeClass() 方法来从匹配的 HTML 元素中删除现有的 CSS 类。以下是 removeClass() 方法的语法：

$(selector).removeClass(className);

此方法接受一个参数，该参数是一个或多个用空格分隔的类，将从每个匹配元素的 class 属性中删除。可以一次删除多个类，用空格分隔，从匹配元素集中删除，如下所示：

$(selector).removeClass("Class1 Class2");

概要

考虑以下带有定义的 CSS 类的 HTML 内容：

<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
<body>
<div class="container">
   <h2>jQuery removeClass() Method</h2>
   <div class="hello big">Hello</div>
   <div class="goodbye small">Goodbye</div>
</div>
</body>

现在，如果我们使用 removeClass() 方法如下：

$( ".hello" ).removeClass("big" );
$( ".goodbye" ).removeClass("small" );

它将产生以下结果：

<body>
<div class="container">
   <h2>jQuery removeClass() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>
</body>

示例

让我们尝试以下示例并验证结果：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).removeClass("big" );
         $( ".goodbye" ).removeClass("small" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
</head>
<body>
   <div class="container">
      <h2>jQuery removeClass() Method</h2>
      <div class="hello big">Hello</div>
      <div class="goodbye small">Goodbye</div>
   </div>
   <br>
   
   <button>Remove Class</button>
</body>
</html>

jQuery - 切换 CSS 类

jQuery 提供了 toggleClass() 方法来切换匹配 HTML 元素上的 CSS 类。以下是 toggleClass() 方法的语法：

$(selector).toggleClass(className);

此方法接受一个参数，该参数是一个或多个用空格分隔的类需要切换。如果匹配元素集中的元素已具有该类，则将其删除；如果元素不具有该类，则将其添加。

示例

让我们尝试以下示例并验证结果：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).toggleClass("big" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
</style>
</head>
<body>
   <div class="container">
      <h2>jQuery toggleClass() Method</h2>
      <div class="hello big">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>
   
   <button>Toggle Class</button>
</body>
</html>

jQuery HTML/CSS 参考

您可以在以下页面获取操作 CSS 和 HTML 内容的所有 jQuery 方法的完整参考：jQuery HTML/CSS 参考。

打印页面