JavaScript 要素に特定のクラスが含まれているかどうかを確実に確認する方法

JavaScript で要素にクラスが含まれているかどうかを確認する方法?

問題:

要素が特定のクラスを所有しているかどうかを確認することは、JavaScript の一般的な要件です。ただし、提供された例で示されているように、className プロパティの比較のみに依存すると、要素が複数のクラスを保持する場合に問題が発生します。

解決策:

の存在を効果的に確認するには特定のクラスは、要素に割り当てられたクラスの総数に関係なく、classList.contains を使用します。

element.classList.contains(className);

このメソッドは最新のブラウザで問題なく機能し、古いブラウザに対応するためにポリフィルが利用可能です。

代替アプローチ:

より広範な互換性を確保するには、わずかな変更を加えて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 < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

この例ではたとえば、このコードは、他のクラスを伴う場合でも、要素内に存在するクラスを効率的に識別して表示します。クラス。

以上がJavaScript 要素に特定のクラスが含まれているかどうかを確実に確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。