第2回 属性&コンテンツ編連載:jQuery逆引きリファレンス(7/19 ページ)

» 2009年11月13日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 要素に対してスタイル・クラスを追加するには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メソッドを優先して利用することをお勧めします。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。