JavaScript を使用して HTML 要素内のクラスの存在を確認する方法

JavaScript を使用した要素クラスの存在の確認

JavaScript では、HTML 要素が特定のクラスを所有しているかどうかを判断することは、最新のブラウザーを使用して簡単に行うことができます。固有の classList オブジェクト。 classList .contains() メソッドを使用すると、要素上のクラスの存在を確認できます。その構文は次のとおりです。

element.classList.contains(class);

このアプローチは、現在のすべてのブラウザでサポートされており、ポリフィルは古いブラウザで利用できます。

レガシー ブラウザ用の代替アプローチ

古いブラウザとの互換性が重要であり、ポリフィルを避けたい場合は、次の代替方法を使用します。 IndexOf() が利用可能です:

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

この最適化されたアプローチにより、完全なクラス一致のみが検出され、部分的なクラス一致による誤検知が防止されます。

提供されたものにソリューションを適用する例

この例では、switch ステートメントを classList メソッドとindexOf メソッドで使用できません。ただし、次のコードでも同じ結果を得ることができます:

var test = document.getElementById("test"),
    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;
    }
}

この改訂されたコードはより簡潔で、HTML 要素内のクラスの存在を正確に識別しながら、冗長なチェックを排除しています。

以上がJavaScript を使用して HTML 要素内のクラスの存在を確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。