HTML 要素内のクラスの存在を効率的に判断するにはどうすればよいでしょうか?

要素内のクラスの存在の決定

要素のクラス メンバーシップを識別することは、CSS スタイル設定と動的 HTML 操作にとって重要です。 JavaScript には要素の className 属性を取得するメソッドが用意されていますが、複数のクラスを扱う場合、その存在を確認することが課題となります。

既存のアプローチ:

現在、一般的なアプローチには次のようなものがあります。 :

switch (testClass) {
  case "class1":
    test.innerHTML = "I have class1";
    break;
  // ...
  default:
    test.innerHTML = "";
}

ただし、要素に複数のクラスがある場合、このメソッドは完全に一致するだけなので不十分です。 match.

element.classList.contains の使用:

よりカスタマイズされた解決策は、element.classList.contains メソッドを利用することです:

element.classList.contains(class);

このメソッドはすべての最新ブラウザでサポートされており、クラスを検証する簡潔な方法を提供します。

indexOf を使用したカスタム関数:

classList をサポートしていない古いブラウザの場合、indexOf を使用したカスタム関数を使用できます:

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

この関数は、指定されたクラスが、たとえ別のクラスの一部であっても、要素の className 属性内にあることを保証します。 name.

ループを使用した代替アプローチ:

この機能を switch ステートメントと組み合わせたい場合は、潜在的なクラス名の配列をループできます:

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;
    }
}

このアプローチにより、柔軟性が向上し、繰り返しの切り替えケースが回避されます。

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