第2回 属性＆コンテンツ編：連載：jQuery逆引きリファレンス（7/19 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　要素に対してスタイル・クラスを追加するにはaddClassメソッドを、削除するにはremoveClassメソッドを、それぞれ利用します。引数clazzには、空白区切りで複数のクラス名を指定することもできます。

　以下は、ボタンをクリックすることで、背景色を青／白と交互に切り替えるためのコードです。背景色を青にするスタイルは、あらかじめスタイル・クラスbg_bとして定義しておきます。

<style type="text/css">

.bg_b { background-color: Blue; }

</style>

……中略……

<script type="text/javascript">

$(function() {

  // ボタンクリック時の挙動を定義
  $('#c_change').click(
    function() {

      var d = $('body');

      // bg_bクラスが適用されているか
      if (d.hasClass('bg_b')) {

        // 適用済みの場合は破棄
        d.removeClass('bg_b');

      } else {

        // 未適用の場合は追加
        d.addClass('bg_b');
      }
    }
  );
});

</script>

……中略……

<input type="button" id="c_change" value="背景色を変更" />

リスト033 ボタンクリック時に、背景色を青／白と交互に切り替え（AddClass.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

ボタンをクリック

リスト033の実行結果
ボタンをクリックするたびに背景色が変化

　スタイルクラス（class属性）の設定は、attr(name, value)メソッドによっても行うことができます。しかし、attr(name, value)メソッドでは、class属性がすでに設定されている場合、設定済みの値を打ち消してしまいますので要注意です。

　一方、addClassメソッドでは、新たなスタイルを「追加」しますので、既存の値が不用意に消えてしまう心配はありません。スタイル・クラスの追加／削除には、できるだけaddClass／removeClassメソッドを優先して利用することをお勧めします。