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

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

問題:

JavaScript の初心者は、要素に特定のプロパティが含まれているかどうかを判断するために、className プロパティの比較に頼ることがよくあります。 クラス。ただし、要素に複数のクラスがあり、目的のクラスが唯一存在しない場合、このアプローチは失敗します。

解決策:

この問題に対処するために、JavaScript はclassList プロパティと contains メソッド。 classList プロパティは要素に適用されるクラスのリストを返し、contains メソッドは特定のクラスがそのリストに含まれているかどうかを確認します。

const element = document.getElementById("test");
const hasClass1 = element.classList.contains("class1");

このアプローチは、要素に存在するクラスの数に関係なく、確実に機能します。 element.

代替アプローチ:

classList がターゲットでサポートされていない場合ブラウザでは、indexOf 関数を利用する代替方法を使用できます:

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

実装:

質問で提供されている例にこのアプローチを適用するには、元の switch ステートメントと次のコード:

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

element.textContent = "";

for (let i = 0; i < classes.length; i++) {
  if (element.classList.contains(classes[i])) {
    element.textContent = `I have ${classes[i]}`;
    break;
  }
}

このコードは、予期されるクラスを反復処理し、最初のクラスを表示します。要素上に存在します。

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