.addClass()

分類：屬性 | 操作 > 類別屬性 | CSS

.addClass( className )傳回：jQuery

說明：將指定的類別新增到一組匹配元素中的每個元素。

  • 新增版本：1.0.addClass( className )

    • className
      類型：字串
      一個或多個以空白分隔的類別，將新增到每個匹配元素的類別屬性。

  • 新增版本：3.3.addClass( classNames )

    • classNames
      類型：陣列
      一個陣列，包含要新增到每個匹配元素的類別屬性的類別。

  • 新增版本：1.4.addClass( function )

    • function
      類型：函式( 整數 index, 字串 currentClassName ) => 字串
      傳回一個或多個空白分隔的類別名稱，以新增至現有的類別名稱。接收集合中元素的索引位置和現有的類別名稱作為引數。在函式中，this 參照集合中的目前元素。

  • 版本新增：3.3.addClass( function )

    • function
      類型：函式( 整數 index, 字串 currentClassName ) => 字串 | 陣列
      傳回一個或多個空白分隔的類別名稱或一個類別名稱陣列，以新增至現有的類別名稱。接收集合中元素的索引位置和現有的類別名稱作為引數。在函式中，this 參照集合中的目前元素。

請務必注意，此方法不會取代類別。它只會新增類別，將其附加到可能已指派給元素的任何類別。

在 jQuery 版本 1.12/2.2 之前，.addClass() 方法會操作所選元素的 className 屬性，而不是 class 屬性。在屬性變更後，瀏覽器會相應地更新屬性。此行為的含意是，此方法僅適用於具有 HTML DOM 語意的文件（例如，不是純 XML 文件）。

從 jQuery 1.12/2.2 開始，此行為已變更，以改善對 XML 文件（包括 SVG）的支援。從此版本開始，改用 class 屬性。因此，.addClass() 可用於 XML 或 SVG 文件。

可以一次加入多個類別，以空白分隔，加入到匹配的元素組中，如下所示

1
 
$( "p" ).addClass( "myClass yourClass" );

此方法通常與 .removeClass() 搭配使用，將元素的類別從一個切換到另一個，如下所示

1
 
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

在此，myClass 和 noClass 類別會從所有段落中移除，而 yourClass 則會加入。

從 jQuery 1.4 開始，.addClass() 方法的參數可以接收函式。

1
2
3
 
$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

假設有一個無序清單包含兩個 <li> 元素，此範例會將類別「item-0」加入第一個 <li>，並將「item-1」加入第二個。

範例

將類別「selected」加入到匹配的元素中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( "selected" );
</script>
 
</body>
</html>

示範

將類別「selected」和「highlight」加入到匹配的元素中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: red;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( "selected highlight" );
</script>
 
</body>
</html>

示範

將類別「selected」和「highlight」加入到匹配的元素中（3.3+ 語法）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: red;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( [ "selected", "highlight" ] );
</script>
 
</body>
</html>

示範

傳入函式到 .addClass()，將「green」類別加入到已經有「red」類別的 div 中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  div {
    background: white;
  }
  .red {
    background: red;
  }
  .red.green {
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>
 
<script>
$( "div" ).addClass(function( index, currentClass ) {
  var addedClass;
 
  if ( currentClass === "red" ) {
    addedClass = "green";
    $( "p" ).text( "There is one green div" );
  }
 
  return addedClass;
});
</script>
 
</body>
</html>

示範