jQuery CSS 類別：addClass() 與 removeClass()

CSS 類別 的檢查、操作與移除。相較於直接改 行內樣式 ，把樣式寫在 CSS 檔裡、程式只負責切換類別，是更好維護的做法。

addClass()

設定

新增一個或多個 CSS 類別。多個類別以空白隔開，寫在同一個字串裡。

addClass(className);

參數

參數是純粹的 類別名稱 ，不是選取器，因此不需要加上點號。

功能	說明	型別	範例	備註
className	類別名稱	String	'wrapper'、'wrapper container'	必填

範例

HTML

<div id="Dom">DOM</div>

JavaScript

$('#Dom').addClass('wrapper');

removeClass()

設定一

移除元素全部的類別。

removeClass();

範例

HTML

<div id="Dom" class="wrapper container">DOM</div>

JavaScript

$('#Dom').removeClass();

不給參數就是全部清空

若只想拿掉其中一個類別，務必把類別名稱明確寫出來，否則整個 class 會被清空。

設定二

移除元素指定的類別。

removeClass(className);

參數

功能	說明	型別	範例	備註
className	類別名稱	String	'wrapper'	必填

範例

HTML

<div id="Dom" class="wrapper">DOM</div>

JavaScript

$('#Dom').removeClass('wrapper');

toggleClass() 與 hasClass()

想依當下狀態自動切換，用 toggleClass() 一個方法就夠；只想檢查而不改動，則用 hasClass() 取得布林值。

JavaScript

$('#Btn').on('click', function () {
  $('#Dom').toggleClass('active');

  // true / false
  console.log($('#Dom').hasClass('active'));
});

常見問題

可以一次新增多個類別嗎？

可以。把類別名稱以空白隔開寫在同一個字串裡即可，移除時也是一樣的寫法。

類別名稱要加上點號嗎？

不用。這兩個方法的參數是純粹的類別名稱，不是 選取器 ，寫成帶點號的形式反而會建立一個名字含點的類別。

removeClass 不給參數會發生什麼事？

會把該元素上的所有類別全部移除。若只想拿掉其中一個，務必把類別名稱明確寫出來。

為什麼建議用類別而不是直接改樣式？

樣式集中寫在 CSS 檔 裡，程式只負責切換狀態，兩邊的職責清楚，改版時也不必回頭翻程式碼找散落的 行內樣式 。

有沒有切換類別的方法？

有，toggleClass() 會依當下是否具有該類別自動切換；若只想檢查而不改動，則用 hasClass() 取得布林值。

延伸閱讀

CSS 樣式屬性插入到 DOM 中什麼是 DOM 操作？CSS 類別選取器

參考資料：jQuery API：.addClass()