jQuery逆引きリファレンス
要素にスタイルクラスを適用／除外するには？（addClass／removeClass／toggleClass／hasClass）
要素にclass属性の値を設定／削除する方法を解説。また、その設定状態を切り替えたり、確認したりする方法も説明する。
要素にスタイルクラス（class属性）を設定するのは、addClassメソッドの役割です。
スタイルを適用するという意味では、cssメソッドにも似ていますが、cssメソッドがコードの中にスタイル定義そのものを記述しなければならないのに対して、addClassメソッドはスタイルクラスの名前で指定できます。つまり、スタイル定義を明確にコードから分離できますので、保守性に優れます（＝JavaScriptのコードに混在したスタイル定義まで、デザイナーがメンテナンスするのは困難です）。cssメソッドは、まずスタイルを操作するには手軽な手段ですが、本格的なアプリでは、スタイル操作はaddClassメソッドを主体に行うことをお勧めします。
例えば以下は、addClassメソッドを使って、class="dotnet"である要素のテキスト色を赤（Red）に、背景色を黄色（Yellow）に変更するコードです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<link rel="stylesheet" href="addClass.css" />
</head>
<body>
<ul id="list">
<li class="dotnet">ASP.NET MVC 5実践プログラミング</li>
<li>JavaScript逆引きレシピ jQuery対応</li>
<li>Ruby on Rails 4アプリケーションプログラミング</li>
<li>10日でおぼえるjQuery入門教室 第2版</li>
<li class="dotnet">独習ASP.NET 第4版</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
// スタイルクラスnewを設定
$('.dotnet').addClass('new');
});
</script>
</body>
</html>
|
|
.new {
color: Red;
background-color: Yellow;
}
|
複数のクラスを適用するならば、以下のように空白区切りでクラス名を列記します。
|
$('.dotnet').addClass('new new2');
|
スタイルクラスを除外する
適用されたスタイルクラスを除外するには、removeClassメソッドを利用します。
|
$('.dotnet').addClass('new');
window.alert('適用中');
$('.dotnet').removeClass('new');
|
スタイルクラスを交互に適用／除外する
さらに、toggleClassメソッドを利用することで、指定されたスタイルクラスを交互に適用／除外することもできます。例えば以下は、リスト項目をクリックする都度、newスタイルを交互に着脱する例です。
|
$('#list li').click(function(e) {
$(this).toggleClass('new');
});
|
別解として、addClass／removeClass／hasClassメソッドで置き換えることもできます。hasClassメソッドは、指定されたスタイルが適用されているかをtrue／falseで返すメソッドです。
|
var c = $(this);
if(c.hasClass('new')) {
// newクラスが適用されている場合は除外
c.removeClass('new');
} else {
// さもなければ適用
c.addClass('new');
}
|
この例では冗長になるだけなので、あえてそうする意味はありませんが、スタイルクラスの有無に応じて、スタイル着脱以外の処理を実装するならば、hasClassメソッドを利用します。
API：.addClass() カテゴリ：CSS｜Attributes（属性）｜Manipulation（要素の操作） > Class Attribute（クラス属性）
API：.removeClass() カテゴリ：CSS｜Attributes（属性）｜Manipulation（要素の操作） > Class Attribute（クラス属性）
API：.toggleClass() カテゴリ：CSS｜Attributes（属性）｜Manipulation（要素の操作） > Class Attribute（クラス属性）
API：.hasClass() カテゴリ：CSS｜Attributes（属性）｜Manipulation（要素の操作） > Class Attribute（クラス属性）
※以下では、本稿の前後を合わせて5回分（第4回～第8回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
4. 要素配下のテキストを取得／設定するには？（text／html）
textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。
5. 要素のスタイルプロパティを変更するには？（css）
背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。
6. 【現在、表示中】≫ 要素にスタイルクラスを適用／除外するには？（addClass／removeClass／toggleClass／hasClass）
要素にclass属性の値を設定／削除する方法を解説。また、その設定状態を切り替えたり、確認したりする方法も説明する。
8. 要素のプロパティを取得／設定するには？（prop）
任意の要素に対してJavaScriptのプロパティを設定／取得する方法を解説。また、要素の属性を設定／取得できるattrメソッドと機能を比較する。
