JavaScript で要素クラスの存在を効率的に確認するにはどうすればよいですか?

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

基本的な JavaScript を使用して、要素に特定のクラスが含まれているかどうかを確認するにはどうすればよいでしょうか? className プロパティを使用する場合、クラスの正確な一致が必要であり、要素に複数のクラスがある場合に制限が生じます。

解決策: element.classList.contains

Element。 classList は、この目的のために特別に設計された .contains メソッドを公開します:

element.classList.contains(className);

このメソッドは、すべての最新ブラウザでサポートされています。

代替:indexOf を使用する

または、classList サポートがない古いブラウザでは、element.className とindexOf を利用できますが、マイナーです。精度を確保するには調整が必要です:

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

これにより、求められたクラスが部分文字列ではないことが保証されます。

コード例

このソリューションを特定の状況に適用するには:

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

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

このコードは、より効率的なアプローチを採用しています。潜在的なクラスの事前定義された配列をループすることで、冗長性が削減され、保守性が向上します。

以上がJavaScript で要素クラスの存在を効率的に確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。