特定のスタイル・クラスを適用したり解除したりを交互に行うことはよくあります。そのような処理は、addClass/removeClassメソッドでも行えますが、具体的なサンプルを見ても分かるように、コードが冗長になりがちです。このようなケースでは、toggleClassメソッドを利用することをお勧めします。toggleClassメソッドは、指定されたスタイル・クラスが適用されている場合にはそのクラスを破棄し、適用されていない場合には追加します。以下は、ボタンをクリックすることで、背景色を青/白と交互に切り替えるためのサンプルです。同様の機能をaddClass/removeClassメソッドで記述したAddClass.htmlとも比較してみると、より理解が深まるでしょう。1.3からは、toggleClassメソッドの第2引数にブール値(true/false)を指定できるようになりました。従来、toggleClassメソッドは無条件に適用/解除を交互に繰り返すだけでしたが、第2引数を指定することで、適用/解除を自分で制御できます(trueで追加、falseで解除)。以下は、ボタンをクリックしたときに乱数を求め、その値が0.5より大きい場合はスタイルを適用、0.5以下である場合には解除するサンプルです。ボタンクリック時に、背景色がランダムに青/白に変化(ToggleClass2.html)このHTMLを実際にブラウザで開く今度は、ボタンクリック時に(交互ではなく)ランダムに背景色が変化することが確認できます。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。