jQuery オブジェクトの addClass() メソッド

jQueryオブジェクトにマッチするHTML要素のclass属性にクラスを追加する。

構文

jQueryObject.addClass(className)

jQueryObject は window.jQuery() で作成した jQuery オブジェクトである。

引数

以下に示す引数を jQuery オブジェクトの addClass メソッドに指定できる。

className

jQuery オブジェクトにマッチする HTML 要素の class 属性に追加するクラスを指定する。クラスは空白で区切って複数指定できる。

サンプル

jQuery('div').addClass('foo');

window.jQuery の代わりに window.$ を使うこともできる。

$('div').addClass('foo');

複数のクラスを追加する

addClass メソッドの引数には、空白で区切った複数のクラスを指定できる。

jQuery("#container").addClass("container mx-auto");

window.jQuery の代わりに window.$ を使うこともできる。

$("#container").addClass("container mx-auto");

重複するクラスは追加されない

要素に既に存在しているクラスを addClass メソッドで追加しようと場合、新たにクラスは追加されず、同じクラスが重複して指定されるわけではない。

イベント

要素にクラスを追加したときにイベントを発生させたい場合、カスタムイベントを発生させる。

jQuery("#container").addClass('container mx-auto');
jQuery("#container").trigger('classChanged')

jQueryオブジェクトの on メソッドでイベントが発生したときの処理を指定することができる。

jQuery("#container").on('classChanged', function(){
  /* do something */
});

クラスの削除

要素からクラスを削除するには、jQueryオブジェクトの removeClass メソッドを使う。

参考文献

OpenJS Foundation (2022) .addClass() | jQuery API Documentation

Tweet