このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

ども。

最近、外はめっきり肌寒くなり、もう冬の気配さえも感じ始める今日この頃になってきましたね。

皆さんはどの様にclassを取得していますか？

え？取得しない？

そんな取得しない方々にも簡単に取得出来る世の中になりました。

今回はclassListについてです。

jQueryのaddClassやremoveClassみたいなことが生のjavascriptでも行えるようになったのです。

（古いブラウザなどは対応していませんのでご注意を）

基本的な使用方法

element.classList

に関数を付与することによってクラスを扱うことが可能となっております。

add();　remove();

classListを通して要素が属するクラスを変更。

これらは、classListにトークン（文字列）を追加、または削除を行います。

例：

classを追加

element.classList.add('foo');

classを削除

element.classList.remove('foo');

対象の要素に追加を行いたいclassがすでにある場合は追加を行わず、

削除をする場合もすでにない場合でも問題なく処理を行ってくれます。

toggle();

超便利なのが、toggleです。

これは、指定したクラスの有無の切り替えを行ってくれる関数です。

詳しく説明すると、既にそのクラスがある場合は削除、クラスが存在しない場合は追加します。

例：

classを追加&削除（切り替え）

element.classList.toggle('foo');

contains();

さらに、クラスが含まれているかどうかを判定するのが、containsとなります。

.mach(/hoge/);とか正規表現を用いること無く、クラス判定を行うことが出来ます。

例：

classを判定

element.classList.contains('foo');

 

詳しいことは以下のページに記述されていますので宜しければぁ。

HTML5 classList API