[解決済み] JavaScriptで要素にクラスが含まれているかどうかを確認する？

質問

プレーンなJavaScript（jQueryではない）を使って、ある要素が を含む のようなクラスはありますか？

現状では、こうしています。

var test = document.getElementById("test");
var testClass = test.className;

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

<div id="test" class="class1"></div>

問題は、HTMLをこのように変更すると...。

<div id="test" class="class1 class5"></div>

...完全一致がなくなったので、デフォルトの出力である何も表示されない ( "" ). しかし、私はまだ、出力が I have class1 というのも <div> 今も が含まれています。 その .class1 クラスがあります。

どのように解決するのですか？

使用方法 element.classList .contains メソッドを使用します。

element.classList.contains(class);

これは現在のすべてのブラウザで動作し、古いブラウザをサポートするポリフィルも存在します。

または 古いブラウザで作業していて、ポリフィルで修正するのが面倒な場合は indexOf が正しいのですが、少し手を加える必要があります。

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

そうでない場合は、次のようになります。 true 探しているクラスが他のクラス名の一部である場合。

DEMO

jQueryも同じような方法（同じではないにしろ）を使っています。

例題に適用した。

switch文との併用はできないので、次のコードで同じ効果を得ることができます。

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

また、冗長性も少なくなります ;)