【Javascript / jQuery】toggleClass()、addClass()、removeClass()メソッドの解説

ハロハロ〜　しゅんです😆
自分のアウトプット用に運営いているブログです。
今回は、、、、
「toggleClass()、addClass()、removeClass()メソッド」についてです。
処理内容が似ているのでここでしっかりとまとめておきます。

先ずは、それぞれのメソッドの処理内容を確認していきます。

○toggleClass()メソッド

「引数に指定されたクラス名が、jQueryオブジェクト内の要素のclass属性に指定されているか確認して、指定されていなければ追加、指定されていれば削除するメソッド」です。

○addClass()メソッド

「引数の文字列(クラス名)をclass属性に追加するメソッド」です。

removeClass()メソッド

「引数の文字列(クラス名)をclass属性から削除するメソッド」です。

toggleClass()メソッドはaddClass()メソッドとremoveClass()メソッドを足して2で割ったようなメソッドですね❣️
それぞれの処理をHTMLとJavaScriptの記述をみて確認していきます。

○元のHTML

<p id="add" class="add">add test class</p>

<p id="remove" class="remove test">remove test class</p>

<p id="toggle1">toggle test class</p>

<p id="toggle2" class="test">toggle test class</p>

○JavaScript

$("#add").addClass("test");

$("#remove").removeClass("test");

$("#toggle1").toggleClass("test");

$("#toggle2").toggleClass("test");

○メソッド実行後のHTML

<p id="add" class="add test">add test class</p>

<p id="remove" class="remove">remove test class</p>

<p id="toggle1" class="test">toggle test class</p>

<p id="toggle2">toggle test class</p>

これを見てもらえればそれぞれの機能が分かると思います。