☰

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

tag-icon • tag-icon javascript html css dom
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

ベストアンサー1

使用element.classList .contains方法：

element.classList.contains(class);

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

あるいは、古いブラウザを使っていて、それを修正するためにポリフィルを使いたくない場合は、indexOf正しいですが、少し調整する必要があります。

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

trueそれ以外の場合は、探しているクラスが別のクラス名の一部であるかどうかもわかります。

デモ

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

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

おすすめ記事