jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？
- SE
- addClassメソッドとはどういったメソッドでしょうか？
- PM
- 任意の要素にclass属性を追加できるメソッドです。
目次
jQueryでのaddClassメソッドの使い方とは？
今回は、jQueryでのaddClassメソッドの使い方について説明します。
addClassメソッドを使用すると、classを追加することができます。addClassメソッドの基本的な使い方から、複数classを追加する方法について紹介します。
また、関連メソッドとして、removeClassメソッドやtoggleClassメソッドの使い方についても紹介します。removeClassメソッドは、指定クラスを削除できます。toggleClassメソッドは、指定クラスの追加・削除を切替えます。
jQueryでのaddClassメソッドの使い方に興味のある方はぜひご覧ください。
基本的な使い方
jQueryのaddClassメソッドの基本的な使い方を紹介します。
HTMLを以下に記載します。
|
1
2
3
4
5
6
|
<div>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>text</p>
</div>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
|
$(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を以下に記載します。
|
1
2
3
4
5
6
|
<div>
<h1>h1</h1>
<h2 class="target">h2</h2>
<h3 class="target">h3</h3>
<p>text</p>
</div>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
|
$(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を以下に記載します。
|
1
2
3
|
<div>
<p>text</p>
</div>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(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を以下に記載します。
|
1
2
3
4
5
6
7
|
<div>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>text</p>
<button>removeClass</button>
</div>
|
CSSは以下のように記述します。
|
1
2
3
|
.new_class {
color: Red;
}
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
|
$(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を以下に記載します。
|
1
2
3
4
5
6
7
|
<div>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>text</p>
<button>toggleClass</button>
</div>
|
CSSは以下のように記述します。
|
1
2
3
|
.new_class {
color: Red;
}
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
|
$(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の追加・削除が切り替わり、それに合わせて文字色が切り替わることが分かります。
- SE
- 追加や削除の他に色しても可能なメソッドなんですね。
- PM
- 他にも複数classを追加できます。応用編ですがアニメーションお作成もできますのでぜひマスターしてください。
まとめ
いかがでしたでしょうか。jQueryのaddClassメソッドを使用すると、classを追加することができます。
addClassメソッドの基本的な使い方から、複数classを追加する方法や関連メソッドとして、removeClassメソッドやtoggleClassメソッドの使い方についても紹介しました。
ぜひご自身でjQueryのソースコードを書いて、理解を深めてください。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)