jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？

Javascript
jQuery
プログラミング言語

公開日時: 2021-03-22 　更新日時: 2022-06-06

jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？

この記事でわかること

システム エンジニア: addClassメソッドとはどういったメソッドでしょうか？

プロジェクト マネージャー: 任意の要素にclass属性を追加できるメソッドです。

jQueryでのaddClassメソッドの使い方とは？

今回は、jQueryでのaddClassメソッドの使い方について説明します。

addClassメソッドを使用すると、classを追加することができます。addClassメソッドの基本的な使い方から、複数classを追加する方法について紹介します。

また、関連メソッドとして、removeClassメソッドやtoggleClassメソッドの使い方についても紹介します。removeClassメソッドは、指定クラスを削除できます。toggleClassメソッドは、指定クラスの追加・削除を切替えます。

jQueryでのaddClassメソッドの使い方に興味のある方はぜひご覧ください。

基本的な使い方

jQueryのaddClassメソッドの基本的な使い方を紹介します。

HTMLを以下に記載します。

<div>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>text</p>
</div>

<div>

</div>

jQueryは以下のように記述します。

$(function() {
  // classの追加
  $('h1, p').addClass('new_class');
  
  // class指定で文字色変更
  $('div').find('.new_class').css("color","red");
});

$(function() {

// classの追加

$('h1, p').addClass('new_class');

// class指定で文字色変更

$('div').find('.new_class').css("color","red");

});

実行結果は以下のようになります。

See the Pen
jquery_addclass1 by kskumd (@kskumd)
on CodePen.

classが追加され、追加されたclassの文字色が赤色になっていることが分かります。

class指定で追加

class指定でaddClassすることができます。

HTMLを以下に記載します。

<div>
  <h1>h1</h1>
  <h2 class="target">h2</h2>
  <h3 class="target">h3</h3>
  <p>text</p>
</div>

<div>

</div>

jQueryは以下のように記述します。

$(function() {
  // class指定でclassの追加
  $('.target').addClass('new_class');
  
  // class指定で文字色変更
  $('div').find('.new_class').css("color","red");
});

$(function() {

// class指定でclassの追加

$('.target').addClass('new_class');

// class指定で文字色変更

$('div').find('.new_class').css("color","red");

});

実行結果は以下のようになります。

See the Pen
jquery_addclass2 by kskumd (@kskumd)
on CodePen.

class指定でclassが追加され、追加されたclassの文字色が赤色になっていることが分かります。

複数classの追加

addClassメソッドでは、スペース区切りでclassを指定することで複数classを追加できます。

HTMLを以下に記載します。

<div>
  <p>text</p>
</div>

<div>

</div>

jQueryは以下のように記述します。

$(function() {
  // classの追加
  $('p').addClass('new_class1 new_class2 new_class3');
  
  // class指定で文字色変更
  $('div').find('.new_class1').css("color","red");

  // class指定で文字サイズ変更
  $('div').find('.new_class2').css("font-size","200%");

  // class指定でフォント変更
  $('div').find('.new_class3').css("font-family","monospace");
});

$(function() {

// classの追加

$('p').addClass('new_class1 new_class2 new_class3');

// class指定で文字色変更

$('div').find('.new_class1').css("color","red");

// class指定で文字サイズ変更

$('div').find('.new_class2').css("font-size","200%");

// class指定でフォント変更

$('div').find('.new_class3').css("font-family","monospace");

});

実行結果は以下のようになります。

See the Pen
jquery_addclass3 by kskumd (@kskumd)
on CodePen.

スペース区切りでclassを指定することで複数classを追加し、文字色・文字サイズ・フォントが変更されていることが分かります。

removeClass

addClassメソッドとは逆に、classを削除できるremoveClassメソッドを紹介します。

HTMLを以下に記載します。

<div>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>text</p>
  <button>removeClass</button>
</div>

<div>

<button>removeClass</button>

</div>

CSSは以下のように記述します。

.new_class {
  color: Red;
}

.new_class {

color: Red;

}

jQueryは以下のように記述します。

$(function() {
  // classの追加
  $('h1, p').addClass('new_class');

  // ボタンイベントでclassの削除
  $('button').on('click', function() {
    $('h1, p').removeClass('new_class');
    $('button').prop('disabled', true)
  })
});

$(function() {

// classの追加

$('h1, p').addClass('new_class');

// ボタンイベントでclassの削除

$('button').on('click', function() {

$('h1, p').removeClass('new_class');

$('button').prop('disabled', true)

})

});

実行結果は以下のようになります。

See the Pen
jquery_addclass4 by kskumd (@kskumd)
on CodePen.

ボタンをクリックするとclassが削除され、文字色が黒に戻ることが分かります。

toggleClass

classの追加・削除を繰り返す、toggleClassメソッドを紹介します。

HTMLを以下に記載します。

<div>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>text</p>
  <button>toggleClass</button>
</div>

<div>

<button>toggleClass</button>

</div>

CSSは以下のように記述します。

.new_class {
  color: Red;
}

.new_class {

color: Red;

}

jQueryは以下のように記述します。

$(function() {
  // classの追加
  $('h1, p').addClass('new_class');

  // ボタンイベントでclassのtoggle
  $('button').on('click', function() {
    $('h1, p').toggleClass('new_class');
  })
});

$(function() {

// classの追加

$('h1, p').addClass('new_class');

// ボタンイベントでclassのtoggle

$('button').on('click', function() {

$('h1, p').toggleClass('new_class');

})

});

実行結果は以下のようになります。

See the Pen
jquery_addclass5 by kskumd (@kskumd)
on CodePen.

ボタンをクリックするたびに、classの追加・削除が切り替わり、それに合わせて文字色が切り替わることが分かります。

システム エンジニア: 追加や削除の他に色しても可能なメソッドなんですね。

プロジェクト マネージャー: 他にも複数classを追加できます。応用編ですがアニメーションお作成もできますのでぜひマスターしてください。

まとめ

いかがでしたでしょうか。jQueryのaddClassメソッドを使用すると、classを追加することができます。

addClassメソッドの基本的な使い方から、複数classを追加する方法や関連メソッドとして、removeClassメソッドやtoggleClassメソッドの使い方についても紹介しました。

ぜひご自身でjQueryのソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？

jQueryでのaddClassメソッドの使い方とは？

基本的な使い方

class指定で追加

複数classの追加

removeClass

toggleClass

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？

jQueryでのaddClassメソッドの使い方とは？

基本的な使い方

class指定で追加

複数classの追加

removeClass

toggleClass

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！

jQueryのif文を基本から解説！文法をマスターしよう！

JavaScriptでのsubstringメソッドを使用した文字列の切り出し方

JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介

スムーススクロールとは？jQuery・CSS・JavaScriptそれぞれでの使用方法について詳しく解説！