JavaScript での要素クラスの存在の確認

要素のクラス属性を検査する場合、多くの場合、要素に特定のクラスが含まれているかどうかを確認する必要があります。提供されたコードは switch ステートメントを利用して要素の正確なクラス値を調べますが、このアプローチでは部分一致の検出に失敗します。

この制限を解決するには、 element.classList .contains メソッドの使用を検討してください。このメソッドはクラス名をパラメータとして受け取り、要素のクラス リスト内にそのクラスが存在することを示すブール値を返します。

element.classList.contains(class);

このメソッドは、最新のシステム全体で広くサポートされています。

また、 .contains メソッドを持たない古いブラウザとの互換性を保つために、次の修正バージョンのindexOfメソッド:

function hasClass(element, className) {
    return (' '   element.className   ' ').indexOf(' '   className   ' ') > -1;
}

この変更により、部分一致を正確に検出できるようになり、検索するクラスがより大きなクラス名の一部である場合の誤検知が回避されます。

このメソッドを指定された例に適用すると、

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i 
.contains メソッドまたは変更された IndexOf 関数を使用すると、ブラウザーの互換性や部分一致の存在に関係なく、要素に JavaScript の特定のクラスが含まれているかどうかを確実に判断できます。