JavaScript・jQueryによる要素へのclassの追加・削除・変更(切り替え)の方法

今回はJavaScript・jQueryによる要素へのclassの追加・削除・変更(切り替え)の方法を備忘録も兼ねて簡単にまとめました。
簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです!
目次
要素へのclassの追加・削除・変更(切り替え)とは?
WEB制作では場合によってはクリックしたりスクロールしたりなど、ユーザーによる操作によって装飾(見た目)を変化させたりする事が必要になる時があります。
そんな時、JavaScript・jQueryによる要素へのclassの追加・削除・変更(切り替え)等を行い要素の状態をユーザーによる操作によって変化するようにWEB制作する事が求められます。
JavaScript・jQueryで直接styleを付与したりして状態を変化させることはできますができる限りCSSで可能な事はCSS側でした方が、処理負荷の軽減やその後の運用・更新等しやすいかと思いますのでclassを追加(付与)・削除・変更(切り替え)してそのclassに対してCSSを追記して状態が変化するようにできる限りしましょう!
JavaScript編
jQueryではなくJavaScriptで記述する場合はメリットとしてjQueryライブラリを読み込んでいなくても処理が実行可能という点です。
jQueryを読み込んでいるサイトだとしてもより早い段階で処理を実行させたい場合は、jQueryライブラリが読み込まれる前に記述して処理させる必要がある場合が実際の仕事では発生したりしますので、そういう場合はJavaScriptで記述していく事が必要な場合があります。
要素へのclassの追加
class
の追加は、classList
のadd
メソッドを使用して下記のように記述します。
下記ではelements
のclass
が付与されている要素の1番目([0]
)の要素にclassName
というclass
を追加しています。
document.querySelectorAll('.elements')[0].classList.add('className');
※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
要素への複数のclassの追加
classList
のadd
メソッドは下記のようにclass名をカンマ区切りに記述していく事で、複数のclass
を追加することができます。
下記ではelements
のclass
が付与されている要素の1番目([0]
)の要素にclassName1
とclassName2
という複数のclass
を追加しています。
document.querySelectorAll('.elements')[0].classList.add('className1', 'className2');
※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
要素からclassを削除
class
の削除は、classList
のremove
メソッドを使用して下記のように記述します。
下記ではelements
のclass
が付与されている要素の1番目([0]
)の要素からclassName
というclass
を削除しています。
document.querySelectorAll('.elements')[0].classList.remove('className');
※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
要素から複数のclassを削除
classList
のremove
メソッドは下記のようにclass名をカンマ区切りに記述していく事で、複数のclass
を削除することができます。
下記ではelements
のclass
が付与されている要素の1番目([0]
)の要素からclassName1
とclassName2
という複数のclass
を削除しています。
document.querySelectorAll('.elements')[0].classList.remove('className1', 'className2');
※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
要素が持っている特定のclassの変更(切り替え)
class
の変更(切り替え)はclassList
のtoggle
メソッドを使用して下記のように記述します。
下記ではelements
のclass
が付与されている要素の1番目([0]
)の要素に指定したclass名className
がある場合はそのclass
を削除し、なければ指定したclass名className
が追加されます。
document.querySelectorAll('.elements')[0].classList.toggle('className');
※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
要素がclassを持っているか確認
要素が指定したclass
を持っているか確認するにはclassList
のcontains
メソッドを使用して下記のように記述します。
下記ではelements
のclass
が付与されている要素の1番目([0]
)の要素にclassName
というclass
がある場合はtrue
、なければfalse
を返します。
document.querySelectorAll('.elements')[0].classList.contains('className');
※要素の取得に関してはjQueryと同じような感覚で使える「document.querySelectorAll(‘.elements’)」を使用しての記述例になります
注意
jQueryでも同様の事ですが特にJavaScriptで記述する場合は対応ブラウザなどその時の対応環境で利用可能(メソッドなど)なものか下記の「MDN公式サイト」や「Can I use…」などで調べて実装するように注意しましょう。
対応状況が確認できるサイト
jQuery編
jQueryで処理をする場合は、短い処理で記述できることや学習コストが少なくすむなど便利な事が多いので、特に初心者の方はjQueryで処理を記述していく方がオススメです。
ですが便利な事ばかりではなく、もちろんデメリットもあります。
その1つがjQueryライブラリ本体を読み込んだ後に処理を記述していく必要があるという点です。
より早い段階で処理を実行させたい、またはjQueryライブラリ本体を読み込める環境ではない場合は、JavaScriptで記述していく事も考慮しましょう。
要素へのclassの追加
jQueryでのclass
の追加は、addClass
メソッドを使用して下記のように記述します。
下記ではelements
のclass
が付与されている要素にclassName
というclass
を追加しています。
$('.elements').addClass('className');
要素への複数のclassの追加
addClass
メソッドは下記のようにclass名をスペース区切りに記述していく事で、複数のclass
を追加することができます。
下記ではelements
のclass
が付与されている要素にclassName1
とclassName2
という複数のclass
を追加しています。
$('.elements').addClass('className1 className2');
要素からclassを削除
jQueryでのclass
の削除は、removeClass
メソッドを使用して下記のように記述します。
下記ではelements
のclass
が付与されている要素のclassName
というclass
を削除しています。
$('.elements').removeClass('className');
要素から複数のclassを削除
removeClass
メソッドは下記のようにclass名をスペース区切りに記述していく事で、複数のclass
を削除することができます。
下記ではelements
のclass
が付与されている要素からclassName1
とclassName2
という複数のclass
を削除しています。
$('.elements').removeClass('className1 className2');
要素が持っている特定のclassの変更(切り替え)
jQueryでのclass
の変更(切り替え)は、toggleClass
メソッドを使用して下記のように記述します。
下記ではelements
のclass
が付与されている要素に指定したclass名className
がある場合はそのclass
を削除し、なければ指定したclass名className
が追加されます。
$('.elements').toggleClass('className');
要素がclassを持っているか確認
jQueryでの要素が指定したclass
を持っているか確認するにはhasClass
メソッドを使用して下記のように記述します。
下記ではelements
のclass
が付与されている要素にclassName
というclass
がある場合はtrue
、なければfalse
を返します。
$('.elements').hasClass('className');
注意
jQueryが動作しないけどなんでだろうという時はまずjQueryが読み込まれているか確認してください。
読み込まれていない場合は公式サイトからダウンロードしてサイトに追加して読み込むか、CDN経由でjQueryライブラリを読み込ませましょう。
CDN経由の場合は実行させたい今回記述したjQueryより前の箇所に下記コードのように(jQuery CDN公式サイトより引用)追記しましょう。
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
jQuery公式サイト
各種CDNの公式サイト
まとめ
今回は「JavaScript・jQueryによる要素へのclassの追加・削除・変更(切り替え)の方法」について簡単にはなりますが、JavaScript・jQueryでの記述方法を説明させていただきました!
複数のメソッドがでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。
参考サイト
JavaScript
jQuery
最後にもう一度ポイントをおさらい
JavaScript
classListとは?
classList
は指定した要素のclass
属性をリスト形式で返すプロパティです。
classList
を使用することで、class
属性の追加、削除、変更(切り替え)やclass
を持っているかなど、簡単に結果を得ることができるようになります。
classList
は下記のメソッドを持っておりますので必要に応じて記述して使い分けましょう。
メソッド名 | 説明 | 記述例 |
---|---|---|
add | 要素へのclassの追加 | elements.classList.add('className'); |
remove | 要素からclassを削除 | elements.classList.remove('className'); |
toggle | 要素が持っている 特定のclassの変更(切り替え) | elements.classList.toggle('className |
contains | 特定のclassを持っているか確認する | elements.classList.contains('className'); |
jQuery
メソッド名 | 説明 | 記述例 |
---|---|---|
addClass | 要素へのclassの追加 | elements.addClass('className'); |
removeClass | 要素からclassを削除 | elements.removeClass('className'); |
toggleClass | 要素が持っている 特定のclassの変更(切り替え) | elements.toggleClass('className |
hasClass | 特定のclassを持っているか確認する | elements.hasClass('className'); |
- jQueryではなくJavaScriptで記述する場合はメリットとしてjQueryライブラリを読み込んでいなくても処理が実行可能!
- jQueryで処理をする場合は、短い処理で記述できることや学習コストが少なくすむなど便利な事が多いので、特に初心者の方はjQueryで処理を記述していく方がオススメ!
- 対応ブラウザなどその時の対応環境で利用可能(メソッドなど)なものか「MDN公式サイト」や「Can I use…」などで調べて実装するように注意しましょう
初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。