JavaScriptで特定のクラス名があるかどうかを判別して条件分岐する方法

JavaScriptで「特定の要素に指定されているクラス属性の値を取得」するには「className」を使えばできますね。

例を書くと、下のような感じです。

<div id="box" class="media">box</div>

let element = document.getElementById('box');
console.log( element.className ); //コンソールに「media」と表示される

複数のクラス名が指定されてた場合はこうなる

じゃあ、例えば下のように「media」「red」と複数のクラス名が指定されていたとします。

<div id="box" class="media red">box</div>

この場合に「className」を使うと「media red」とクラス名がつながって取得されます。

ここからが本題ですが、複数のクラス名が指定されている状態で「クラス名に『red』が指定されているかどうかで条件分岐したい」という時は、

if( element.className == 'media red' ){
 //何か処理を書く
}

と書けばいいかもですが、あんまり厳密とは言えないですね・・・。

別の方法として、取得した値に対して「indexOf」を使って「『red』の文字列があるかどうかを判別する」処理を加えたりすればできると思いますが・・・手間だし、コードが増えるし「他のやり方ってないかな・・・」って感じでした。

ちょっと調べたのですが「classList.contains」を使うと、わりとスッキリ書けました。

例えば、クラス名に「『red』の文字列があるかどうかを判別する」には以下のように書くとできます。

if( element.classList.contains('red') == true ){
 //何か処理を書く
}

クラス名「red」が指定されていればtrueが返ってきます。

使えるブラウザなどの詳細は「element.classList – Web API インターフェイス | MDN」に書いてあるのでご参考ください。