gotohayato.com

月(ダークモード)
太陽(ライトモード)

jQuery で複数のクラスをまとめて追加する方法

jQuery

jQuery で複数のクラスをまとめて追加する方法についてです。

早速結論ですが、単純に addClass() メソッドにスペース区切りで複数のクラス名を渡せば OK です。

$('a').addClass('fa fa-external-link');

逆に複数のクラスを削除したいときも同様の書き方が使えます。

$('a').removeClass('fa fa-external-link');

さらに、複数のクラスをまとめてトグルしたいときにも toggleClass() で同じ書き方ができます。 toggleClass() に渡された複数のクラスはそれぞれ独立してトグルされます。

$('a').toggleClass('fa-external-link active');

追記 2020/08/01: 2020 年現在、 IE 11 等の古いブラウザをサポート対象外にできる場合は、 jQuery を使わず vanilla JS の classList を使う手もあります。

var el = document.getElementById('title');
// 複数のクラスを追加する
el.classList.add('class-a', 'class-b', 'class-c');
// 複数のクラスを削除する
el.classList.remove('class-a', 'class-b', 'class-c');
// `classList.toggle()` は存在するが、複数のクラスをまとめて扱うことはできない

後藤隼人
ウェブサイト制作・ウェブアプリ開発やマーケティングをしています。
GitHub
© 2020 gotohayato.com
サイトについてタグアーカイブメッセージを送る