[JS] 動的にクラスを変更

タグ :

jQuery の勉強をまとめるシリーズです。
前記事「セレクターの階層について」でも使用していましたが、クラスを追加することでスタイルを変更する方法があります。
今回は、この動的にクラスを変更する API についてまとめます。

addClass()

jQuery で html 要素の class 属性にスタイル用のクラスを追加するには、「addClass()」を使用します。
引数にはスタイルシートのクラスを指定します。

[ 構文 ]
.addClass(“クラス名”)
[ コード ]
$(function() {
	$("button").click(function () {
		$("div p").addClass("bg_blue");
	});
});

3行目の addClass() でクラスの追加を行います。

<h4>動的にクラスを追加</h4>
<div>
	<p>ここにクラスを追加するよ</p>
</div>
<button>追加</button>

3行目の p タグのクラス属性を変更します。

.bg_blue {
	background: blue;
}

背景色を青にするというスタイルです。

<div>
	<p class="bg_blue">ここにクラスを追加するよ</p>
</div>

p 要素にクラスが追加されます。

ボタンクリックでテキストの p タグ領域の背景色が青に変更されます。
既にクラスが登録されている場合は、空白区切りで追加されます。
と、ここまでは過去記事でも行ってきた内容です。

removeClass()

jQuery で html 要素の class 属性からスタイル用のクラスを除去するには、「removeClass()」を使用します。
引数にはスタイルシートのクラスを指定します。
使い方は addClass と同様です。

[ 構文 ]
.removeClass(“クラス名”)
[ コード ]
$(function() {
	$("button").click(function () {
		$("div p").removeClass("bg_blue");
	});
});

3行目の removeClass() でクラスの除去を行います。

<h4>動的にクラスを除去</h4>
<div>
	<p class="bg_blue">ここのクラスを除去するよ</p>
</div>
<button>除去</button>

3行目の p タグのクラス属性を変更します。

.bg_blue {
	background: blue;
}

背景色を青にするというスタイルです。

<div>
	<p class>ここのクラスを除去するよ</p>
</div>

p 要素のクラスが除去されます。

ボタンクリックでテキストの p タグ領域の背景色がクリアされます。
複数のクラスを除去するには、以下のように空白区切りで指定します。
「.removeClass(“bg_blue bg_red bg_green …”)」

toggleClass()

html 要素の class 属性にクラスを追加したり、追加したクラスを除去する処理を繰り返して実行する場合には、「toggleClass()」を使用します。
引数にはスタイルシートのクラスを指定します。

[ 構文 ]
.toggleClass(“クラス名”)
[ コード ]
$(function() {
	$("button").click(function () {
		$("div p").toggleClass("bg_blue");
	});
});

3行目の toggleClass() でクラスの追加・除去を行います。

<h4>動的にクラスを追加・除去</h4>
<div>
	<p>ここのクラスを可変させるよ</p>
</div>
<button>可変</button>

3行目の p タグのクラス属性を変更します。

.bg_blue {
	background: blue;
}

背景色を青にするというスタイルです。

<div>
	<p class="bg_blue">ここのクラスを可変させるよ</p>
</div>
<div>
	<p class=>ここのクラスを可変させるよ</p>
</div>

p 要素のクラスが可変します。

ボタンをクリックするたびに、追加・除去を繰り返します。
toggleClass() では、複数のクラスの指定が出来ないので注意が必要です。

まとめ

クラスの追加・除去において、toggleClass() は非常に便利です。
直接スタイルを変更させる方法でトグルと同様の処理を行おうとすると、ちょいと面倒くさい処理が必要になってしまいます。
せっかくある便利な機能は使っておいて損は無いと思います。

クラスを追加・除去してスタイルを変更する方法でのデメリットとしては、CSS を登録しておく必要があるという点と、それに伴い、登録してあるスタイルにしか変更出来ないという点だと思います。

逆にメリットは、複雑なスタイルを一括で変更できるという点だと思います。
このメリットがデメリット分を打ち負かす程に強力な優秀点なのではないでしょうか。。

Share

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

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed