[jQuery]class属性の操作

jQueryを使用して、html要素のclass属性を操作する方法

class属性に、任意のクラスを追加

addClassメソッドを使用して、クラスを追加出来る。

以下の例では、input要素すべてに「className」というクラスを追加しています。

$(function () {
  $('input').addClass('className');
});

複数のクラスを追加したい場合には、スペースで区切って複数のクラス名を列挙してあげるとよい。
もしくは、addClass('class1').addClass('class2')のようにメソッドチェイン呼び出しにしてあげるとよい。
個人的には、後者の方が好み。いくつのクラスが追加されてるか分かるし、クラス名を単独になるから可読性高くなるし。

class属性から、任意のクラスを削除

removeClassメソッドを使用して、クラスを削除することが出来る。

基本的な使い方は、addClassと同じ。

以下の例では、input要素から「className」というクラスを削除しています。

$(function () {
  $('input').removeClass('className');
});

イベントを拾ってclassの有無を切り替える

イベントに応じて特定のクラスを削除したり、追加したりする方法。
例えば、input:textにフォーカスがあたっている場合、背景色を変更するクラスを追加して、フォーカスが外れた場合に削除したりする場合に使える。
addClassとremoveClassを組み合わせて使用したら出来るけど、toggleClassというメソッドが用意されているので、こちらを使った方が見通しがよくなる。

この例は、フォーカスがあたった場合と外れた場合に、changeTextColorファンクションを呼び出しています。
呼び出し先のメソッドでは、toggleClass('active')となっているので、「active」クラスがあればクラス属性から削除され、なければ追加されます。

$(function () {
  $('input:text').focusin(changeTextColor).focusout(changeTextColor);
});
function changeTextColor() {
  $(this).toggleClass('active');
}

指定されたクラスがclass属性にあるかチェック

hasClassメソッドを使用してテストできる。

$(function () {
  $('input').hasClass('className');
});