JavaScript で要素に特定のクラスが含まれているかどうかを確認するにはどうすればよいですか?

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

JavaScript で要素を操作する場合、要素がクラスを含んでいるかどうかを確認すると便利なことがよくあります。特定のクラスが含まれています。

問題:

要素の className プロパティを正確なクラス名と比較する従来の方法を使用すると、要素に複数のクラスが含まれる場合に誤検知が発生します。クラス。たとえば、要素にクラス class1 があり、コードが class1 をチェックする場合、要素に他のクラスもあれば false を返します。

解決策: element.classList.contains()

最新の解決策は、element.classList.contains() メソッドを使用することです。このメソッドは、要素に指定されたクラスが含まれている場合に true を返します。

element.classList.contains(className);

このメソッドは、すべての主要なブラウザで機能します。

代替:indexOf() と変更

古いブラウザとの互換性のために、indexOf() メソッドを使用できますが、誤検知を避けるためにわずかな変更が必要です:

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

例に適用

classList.contains() メソッドを使用すると、提供されたコードを次のように簡略化できます。 :

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

test.innerHTML = "";

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

このアプローチは冗長性を排除し、クラスの存在についてより堅牢なチェックを提供します。

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