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.tw/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.tw/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.tw/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 參考。

列印頁面