JavaScript で、特定のクラスが存在するかどうかを判定する方法メモです。
classList.contains | 特定の要素が特定のクラスが存在するか
classList.contains を使って、要素に指定するクラス名があるかどうかを判定できます。
以下のコードは、element に class_name があるかをチェックします。
JavaScript
element.classList.contains('class_name');返り値は、ture（クラスが存在する）、または false（クラスが存在しない）です。
以下のコードはm（liタグ）にクラス（’red’）が存在するかどうかをチェックし、’red’クラスがあればカラーを「red」に、そうでなければカラーは「black」のスタイルが当てられます。
JavaScript
const elements = document.querySelectorAll('li');
for (let element of elements) {
if (element.classList.contains('red')) {
element.style.color = 'red';
} else {
element.style.color = 'black';
}
}querySelectorAllについて
length | ページ上にクラスが存在するか
何かしらの要素は指定せず、ページ内にクラスがあるかどうかをチェックする場合は length を使用して判定できます。
JavaScript
const elements = document.querySelectorAll('.class_name');
if (elements.length > 0) {
console.log('「class_name」を持つ要素があります');
} else {
console.log('「class_name」を持つ要素がありません');
}カテゴリー : JavaScript
