Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素にスタイルクラスを適用/除外するには?(addClass/removeClass/toggleClass/hasClass)

2014年12月4日

要素にclass属性の値を設定/削除する方法を解説。また、その設定状態を切り替えたり、確認したりする方法も説明する。

  • このエントリーをはてなブックマークに追加

 要素にスタイルクラス(class属性)を設定するのは、addClassメソッドの役割です。

 スタイルを適用するという意味では、cssメソッドにも似ていますが、cssメソッドがコードの中にスタイル定義そのものを記述しなければならないのに対して、addClassメソッドはスタイルクラスの名前で指定できます。つまり、スタイル定義を明確にコードから分離できますので、保守性に優れます(=JavaScriptのコードに混在したスタイル定義まで、デザイナーがメンテナンスするのは困難です)。cssメソッドは、まずスタイルを操作するには手軽な手段ですが、本格的なアプリでは、スタイル操作はaddClassメソッドを主体に行うことをお勧めします。

 例えば以下は、addClassメソッドを使って、class="dotnet"である要素のテキスト色を赤(Red)に、背景色を黄色(Yellow)に変更するコードです。

HTML
<!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>
addClassメソッドで要素のスタイルを変更するコード(addClass.html)
CSS
.new {
  color: Red;
  background-color: Yellow;
}
スタイルクラスnewを定義したスタイルシート(addClass.css)
「class="dotnet"」である要素のテキストを赤色、背景色を黄色に

 複数のクラスを適用するならば、以下のように空白区切りでクラス名を列記します。

JavaScript
$('.dotnet').addClass('new new2');
複数のクラスを適用するコード(addClass.html)

スタイルクラスを除外する

 適用されたスタイルクラスを除外するには、removeClassメソッドを利用します。

JavaScript
$('.dotnet').addClass('new');
window.alert('適用中');
$('.dotnet').removeClass('new');
スタイルクラスを除外するコード(addClass.html)
適用したスタイルクラスnewを除外
適用したスタイルクラスnewを除外
適用したスタイルクラスnewを除外

スタイルクラスを交互に適用/除外する

 さらに、toggleClassメソッドを利用することで、指定されたスタイルクラスを交互に適用/除外することもできます。例えば以下は、リスト項目をクリックする都度、newスタイルを交互に着脱する例です。

JavaScript
$('#list li').click(function(e) {
  $(this).toggleClass('new');
});
リスト項目のクリックでスタイルを交互に着脱するコード(toggleClass.html)
クリックで、newスタイルクラスを着脱
クリックで、newスタイルクラスを着脱
クリックで、newスタイルクラスを着脱

 別解として、addClassremoveClasshasClassメソッドで置き換えることもできます。hasClassメソッドは、指定されたスタイルが適用されているかをtrue/falseで返すメソッドです。

JavaScript
var c = $(this);
if(c.hasClass('new')) {
  // newクラスが適用されている場合は除外
  c.removeClass('new');
} else {
  // さもなければ適用
  c.addClass('new');
}
上のサンプルをaddClass/removeClass/hasClassメソッドで置き換える例

 この例では冗長になるだけなので、あえてそうする意味はありませんが、スタイルクラスの有無に応じて、スタイル着脱以外の処理を実装するならば、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]を参照してください。

jQuery逆引きリファレンス
4. 要素配下のテキストを取得/設定するには?(text/html)

textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。

jQuery逆引きリファレンス
5. 要素のスタイルプロパティを変更するには?(css)

背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。

jQuery逆引きリファレンス
6. 【現在、表示中】≫ 要素にスタイルクラスを適用/除外するには?(addClass/removeClass/toggleClass/hasClass)

要素にclass属性の値を設定/削除する方法を解説。また、その設定状態を切り替えたり、確認したりする方法も説明する。

jQuery逆引きリファレンス
7. 要素の属性を操作するには?(attr/removeAttr)

任意の要素の、任意の属性に対して値を設定/取得する方法を解説。また、複数の属性をまとめて設定する方法も説明する。

jQuery逆引きリファレンス
8. 要素のプロパティを取得/設定するには?(prop)

任意の要素に対してJavaScriptのプロパティを設定/取得する方法を解説。また、要素の属性を設定/取得できるattrメソッドと機能を比較する。

サイトからのお知らせ

Twitterでつぶやこう!