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://www.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);

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

$(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://www.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提供toggleClas()方法来在匹配的HTML元素上切换一个CSS类。以下是toggleClass()方法的语法：

$(selector).toggleClass(className);

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

示例

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

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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>