jQueryでスタイルやアニメーションを適用する方法もありますが、本来レイアウトやスタイリングはcssで行うべきでしょう。
classにcssを設定しておき、あるタイミングでそのclassをjQueryで追加するという方法です。
今回はclassを追加するだけでなく、逆にclassを消したり、classの追加と削除を交互に繰り返してくれる便利なメソッドも併せてご紹介します。
cssとjavascriptの役割を明確にする意味でもよく使われるので、覚えておきたいですね。
目次
addClass() でclassを追加する
指定した要素にclassを追加します。
基本構文
$(‘p’).addClass(‘class’)
addClass()の引数に追加するclass名を指定するだけです。
メソッド名のCだけ大文字のキャメルケースになっているので注意しましょう。
addClass()
キャメルケース（英: camelcase）は、複合語をひと綴りとして、要素語の最初を大文字で書き表すことをいう。キャメルケースとは、大文字が「らくだのこぶ」のように見えることからの命名である。
classを複数追加する
classは複数追加することも出来ます。
$(‘p’).addClass(‘class1 class2 class3’)
addClass()の引数に、複数のclassを半角スペースで区切りながら追加します。
指定要素全てにclassを追加しスタイルを適用するサンプル
<p>要素にclassを追加してテキストを赤字にしてみましょう。
HTML & CSS
|
1 2 3 4 5 6 7 8 9 10 |
<!--class名colorにテキストを赤字にするcssを設定--> <style> .color {color: red;} </style> <div> <p>classを追加1</p> <p>classを追加2</p> <p>classを追加3</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // <p>要素にclassを追加 $('p').addClass('color'); }); |
結果
|
1 2 3 4 5 |
<div> <p class="color">classを追加1</p> <p class="color">classを追加2</p> <p class="color">classを追加3</p> </div> |
classを追加1
classを追加2
classを追加3
<p>要素にclassが追加され、classに設定してあるcssが適用されたことで、テキストが赤字で表示されました。
特定の要素にだけclassを追加しスタイルを適用するサンプル
今度は、特定の<p>要素にだけスタイルを適用します。
HTML & CSS
|
1 2 3 4 5 6 7 8 9 10 |
<!--class名colorにテキストを赤字にするcssを設定--> <style> .color {color: red;} </style> <div> <p>classを追加1</p> <p>classを追加2</p> <p>classを追加3</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // セレクタに:lastを付け<p>要素の最後だけにclassを追加 $('p:last').addClass('color'); }); |
結果
|
1 2 3 4 5 |
<div> <p>classを追加1</p> <p>classを追加2</p> <p class="color">classを追加3</p> </div> |
classを追加1
classを追加2
classを追加3
セレクタに:lastを付け、<p>要素の最後だけにclassが追加されました。最後の文字だけが赤文字で表示されています。
他にも最初の要素だけを指定する:firstや、特定の順番を指定する:eq(n)などを使えばいろいろな追加が可能です。
removeClass() でclassを削除する
指定した要素からclassを削除します。
基本構文
$(‘p’).removeClass(‘class’)
removeClass()の引数に削除するclass名を指定するだけです。
これもメソッド名のCだけ大文字のキャメルケースになっているので注意しましょう。
指定要素全てのclassを削除しスタイルを外すサンプル
<p>要素のclassを削除してテキストを黒字に戻してみましょう。
HTML & CSS
|
1 2 3 4 5 6 7 8 9 |
<style> .color {color: red;} </style> <div> <p class="color">classを追加1</p> <p class="color">classを追加2</p> <p class="color">classを追加3</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // <p>要素のclassを削除 $('p').removeClass('color'); }); |
結果
|
1 2 3 4 5 |
<div> <p>classを追加1</p> <p>classを追加2</p> <p>classを追加3</p> </div> |
classを追加1
classを追加2
classを追加3
<p>要素のclassが削除され、テキストが黒字に戻りました。
addClass()同様、一部要素のclassだけ削除したりも可能です。
toggleClass() でclassの追加または削除
指定した要素にclassがあれば削除、なければ追加します。
基本構文
$(‘p’).toggleClass(‘class’)
toggleClass()の引数に追加または削除するclass名を指定するだけです。
こちらもメソッド名のCだけ大文字のキャメルケースになっているので注意しましょう。
指定要素をクリックするたびにclassの追加と削除を繰り返すサンプル
<p>要素をクリックしたらclassを追加し、classを追加した要素をクリックするとclassが消え、それが交互に繰り返されるプログラムを作ってみましょう。
HTML & CSS
|
1 2 3 4 5 6 7 8 9 |
<style> .color {color: red;} </style> <div> <p>classを追加1</p> <p>classを追加2</p> <p>classを追加3</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { // clickイベントでクリックすると発動 $('p').click(function() { // クリックした要素をthisで取得してclassの追加または削除 $(this).toggleClass('color'); }); }); |
結果（動作サンプル）
テキストをクリックしてみてください。
classを追加1
classを追加2
classを追加3
上記テキストをクリックすると文字色が変わるかと思います。
toggleClass()は、たった1行でこのような切り替えプログラムが作れるので便利ですね。
