脱jQuery .addClass() .hasClass() .removeClass() .toggleClass()

2015-12-14

class 関連の jQuery のメソッドです。以前も一部使いましたが、今回すべてネイティブに書き換えます。

詳しくは脱jQuery その1 を参照してください。

without-jquery

今回の書き換えは IE10 以上が対象となります。IE9 は利用率も現在は低いためフォローしません。もし IE9 もフォローしたいという場合は以下で調べてみてください。少し難しいですが IE8 までフォローした形で書いてあります。

.addClass()

$("#main").addClass("test")

document.getElementById("main").classList.add("test")

#main に test というクラスを追加します。class 関連の操作は classList を使います。これを使うことで jQuery のメソッドとほぼ同じ形でネイティブに書き換えることが出来ます。 classList.add とすることで class を追加します。

$("#main").hasClass("test")

document.getElementById("main").classList.contains("test")

class を持っているときは true、持っていない時は false を返す命令です。これも classList を用います。

classList.contains で真偽値を返します。

$("#main").removeClass("test")

document.getElementById("main").classList.remove("test")

test という class を削除します。同様に classList を使います。classList.remove で削除となります。

$("#main").toggleClass("test")

document.getElementById("main").classList.toggle("test")

jQuery の toggleClass もネイティブに存在します。test という class を持ってる際は削除、持ってない場合は追加します。classList.toggle でネイティブ書き換えとなります。

IE9 は classList を使用できません。IE9 もフォローする場合、addClass の書き換えは簡単なのですがそれ以外が結構きついです。正規表現をつかってゴリゴリやっていく方法もあるのですが classList を使ったほうがスマートです。