web-dev-qa-db-ja.com

要素に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にしたいと思っています。

javascripthtmlcssdom
436
daGUY

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

element.classList.contains(class);

これは現在のすべてのブラウザで機能し、古いブラウザをサポートするためのpolyfillもあります。

代替、古いブラウザを使っていて、それらを修正するためにpolyfillsを使いたくないのであれば、 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;
    }
}

それはまたより少なく冗長です;）

730
Felix Kling

簡単で効果的な解決策は .contains methodを試すことです。

test.classList.contains(testClass);
83
developer

最近のブラウザでは、 Element.classList のcontainsメソッドを使用することができます。

testElement.classList.contains(className)

デモ

var testElement = document.getElementById('test');

console.log({
    'main' : testElement.classList.contains('main'),
    'cont' : testElement.classList.contains('cont'),
    'content' : testElement.classList.contains('content'),
    'main-cont' : testElement.classList.contains('main-cont'),
    'main-content' : testElement.classList.contains('main-content')
});
<div id="test" class="main main-content content"></div>

対応ブラウザ

enter image description here

（from CanIUse.com ）

ポリフィル

Element.classList を使用したいが、より古いブラウザもサポートしたい場合は、 このpolyfill by Eli Gray の使用を検討してください。 。

38
John Slegers

彼はswitch（）を使いたがっているので、まだ誰もこれを出していないことに驚きます。

var test = document.getElementById("test");
var testClasses = test.className.split(" ");
test.innerHTML = "";
for(var i=0; i<testClasses.length; i++) {
    switch(testClasses[i]) {
        case "class1": test.innerHTML += "I have class1<br/>"; break;
        case "class2": test.innerHTML += "I have class2<br/>"; break;
        case "class3": test.innerHTML += "I have class3<br/>"; break;
        case "class4": test.innerHTML += "I have class4<br/>"; break;
        default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>";
    }
}
9
Thought

JQueryを使わずに、要素にクラスが含まれているかどうかをチェックしようとしているのであれば、ちょっとした断片です。

function hasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

これはelementが空白で区切られた複数のクラス名を含むかもしれないという事実を説明します。

_または_

この関数をelement prototypeに割り当てることもできます。

Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

（jQueryの.hasClass()関数と非常によく似た）次のように起動してください： 

document.getElementById('MyDiv').hasClass('active');
6
Keval Bhatt

これは少し古いですが、誰かが私のソリューションが役立つと思うかもしれません：

// Fix IE's indexOf Array
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement) {
        if (this == null) throw new TypeError();
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) return -1;
        var n = 0;
        if (arguments.length > 0) {
            n = Number(arguments[1]);
            if (n != n) n = 0;
            else if (n != 0 && n != Infinity && n != -Infinity) n = (n > 0 || -1) * Math.floor(Math.abs(n));
        }
        if (n >= len) return -1;
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) if (k in t && t[k] === searchElement) return k;
        return -1;
    }
}
// add hasClass support
if (!Element.prototype.hasClass) {
    Element.prototype.hasClass = function (classname) {
        if (this == null) throw new TypeError();
        return this.className.split(' ').indexOf(classname) === -1 ? false : true;
    }
}
5
Dementic

簡略化されたoneliner：1

function hasClassName(classname,id) {
 return  String ( ( document.getElementById(id)||{} ) .className )
         .split(/\s/)
         .indexOf(classname) >= 0;
}

1 配列のindexOfはIE（もちろん）ではサポートされていません。そのためにネット上で見つけるべきたくさんの猿パッチがあります。

5
KooiInc

私は多くの答えがあることを知っていますが、これらのほとんどは追加機能と追加クラスのためのものです。これは私が個人的に使用しているものです。よりきれいで、はるかに少ないコード行！

if( document.body.className.match('category-page') ) { 
  console.log('yes');
}
3
TheBlackBenzKid

classNameは単なる文字列なので、通常の indexOf 関数を使用してクラスのリストに別の文字列が含まれているかどうかを確認できます。

3
David

これは大文字と小文字を区別しないささいな解決策です：

function hasClass(element, classNameToTestFor) {
    var classNames = element.className.split(' ');
    for (var i = 0; i < classNames.length; i++) {
        if (classNames[i].toLowerCase() == classNameToTestFor.toLowerCase()) {
            return true;
        }
    }
    return false;
}
2
Anders Fjeldstad

可能であればclassListを使用するプロトタイプメソッドを作成しました。それ以外の場合はindexOfを使用します。

Element.prototype.hasClass = Element.prototype.hasClass || 
  function(classArr){
    var hasClass = 0,
        className = this.getAttribute('class');
  
    if( this == null || !classArr || !className ) return false;
  
    if( !(classArr instanceof Array) )
      classArr = classArr.split(' ');

    for( var i in classArr )
      // this.classList.contains(classArr[i]) // for modern browsers
      if( className.split(classArr[i]).length > 1 )  
          hasClass++;

    return hasClass == classArr.length;
};


///////////////////////////////
// TESTS (see browser's console when inspecting the output)

var Elm1 = document.querySelector('p');
var Elm2 = document.querySelector('b');
var Elm3 = Elm1.firstChild; // textNode
var Elm4 = document.querySelector('text'); // SVG text

console.log( Elm1, ' has class "a": ', Elm1.hasClass('a') );
console.log( Elm1, ' has class "b": ', Elm1.hasClass('b') );
console.log( Elm1, ' has class "c": ', Elm1.hasClass('c') );
console.log( Elm1, ' has class "d": ', Elm1.hasClass('d') );
console.log( Elm1, ' has class "a c": ', Elm1.hasClass('a c') );
console.log( Elm1, ' has class "a d": ', Elm1.hasClass('a d') );
console.log( Elm1, ' has class "": ', Elm1.hasClass('') );

console.log( Elm2, ' has class "a": ', Elm2.hasClass('a') );

// console.log( Elm3, ' has class "a": ', Elm3.hasClass('a') );

console.log( Elm4, ' has class "a": ', Elm4.hasClass('a') );
<p class='a b c'>This is a <b>test</b> string</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
    <text x="10" y="20" class='a'>SVG Text Example</text>
</svg>

テストページ

2
vsync

Element.matches（）

element.matches（selectorString）

MDN Webドキュメント によると：

Element.matches()メソッドは、指定されたセレクター文字列によって要素が選択される場合はtrueを返します。それ以外の場合はfalseを返します。

したがって、要素にクラスが含まれているかどうかを判断するには、 Element.matches() を使用します。

const element = document.querySelector('#example');

console.log(element.matches('.foo')); // true
<div id="example" class="foo bar"></div>

ブラウザの互換性を見る

2
Grant Miller

要素にクラス名が1つしかない場合は、class属性を取得することで簡単に確認できます。他の答えはもっと堅牢ですが、確かにこれはユースケースです。

if ( element.getAttribute('class') === 'classname' ) {

}
1
Brandon Brule

  1. ClassNameと検索している文字列の隣にスペースを追加するというFelixのトリックは、要素にクラスがあるかどうかを判断するための正しいアプローチです。

  2. クラスによって異なる振る舞いをするために、マップ内で関数参照、つまり関数を使用することができます。

    function fn1(element){ /* code for element with class1 */ }

function fn2(element){ /* code for element with class2 */ }

function fn2(element){ /* code for element with class3 */ }

var fns={'class1': fn1, 'class2': fn2, 'class3': fn3};

for(var i in fns) {
    if(hasClass(test, i)) {
        fns[i](test);
    }
}
    • for（var i in fns）は、fnsマップ内のキーを反復処理します。
    • Fnsiの後に中断がないことは、一致があるときはいつでもコードが実行されることを可能にします - そのため、要素がf.i.、class1とclass2を持つなら、fn1とfn2の両方が実行されます。
    • この方法の利点は、各クラスに対して実行するコードが、switch文のコードのように任意であることです。あなたの例ではすべてのケースが同じような操作を実行しました、しかし明日あなたはそれぞれに異なることをする必要があるかもしれません。
    • デフォルトのケースをシミュレートするには、ループ内で一致が見つかったかどうかをステータス変数に知らせます。
1
entonio

私はPolyでclassList機能を埋め、新しい構文を使います。このようにして、新しいブラウザは新しい実装（これははるかに高速です）を使用し、古いブラウザのみがコードからパフォーマンスへの影響を受けます。

https://github.com/remy/polyfills/blob/master/classList.js

1
Eric Young

特定のクラスがVanilla JavaScriptを使用している場合に、より早く簡単に要素をチェックする方法については、このCodepenリンクを参照してください。

クラスを持つ（Vanilla JS）

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

これを試してください。

document.getElementsByClassName = function(cl) {
   var retnode = [];
   var myclass = new RegExp('\\b'+cl+'\\b');
   var elem = this.getElementsByTagName('*');
   for (var i = 0; i < elem.length; i++) {
       var classes = elem[i].className;
       if (myclass.test(classes)) retnode.Push(elem[i]);
   }
    return retnode;
};
0
jimy

これは少しオフですが、切り替えをトリガーするイベントがある場合は、クラスなしで実行できます。

<div id="classOne1"></div>
<div id="classOne2"></div>
<div id="classTwo3"></div>

できるよ

$('body').click( function() {

    switch ( this.id.replace(/[0-9]/g, '') ) {
        case 'classOne': this.innerHTML = "I have classOne"; break;
        case 'classTwo': this.innerHTML = "I have classTwo"; break;
        default: this.innerHTML = "";
    }

});

.replace(/[0-9]/g, '')はidから数字を削除します。

これは少々手間がかかりますが、追加の機能やループがなくても長いスイッチで動作します。

0
Arthur Tarasov

現在どの要素がクラス '.bar'ですか。これは別の解決策ですが、それはあなた次第です。

var reg = /Image/g, // regexp for an image element
query = document.querySelector('.bar'); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string

if (query.match(reg)) { // checks if it matches
  alert('the class .bar is attached to the following Element:\n' + query);
}

jsfiddleデモ

もちろんこれは1つの単純な要素<img>（/Image/g）の検索にすぎませんが、<li>は/LI/g、<ul> = /UL/gなどのようにすべてを配列に入れることができます。

0
Thielicious

私は完璧な解決策はこれになると思います

if ($(this).hasClass("your_Class")) 
    alert("positive");            
else              
    alert("Negative");
0
Abhishek

これはIE8 +でサポートされています。

まず、IE10 +でサポートされているclassListメソッドを使用できる場合は、containsが存在するかどうかを確認します。私たちがIE9か8にいるなら、それは正規表現を使うことに頼ります。

if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
0
Buts

インラインSVG要素内でクラス名を見つけようとしている人々のための答えを追加するためだけに。

hasCLass()関数を次のように変更します。

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

classNameプロパティを使用する代わりに、クラス名を取得するためにgetAttribute()メソッドを使用する必要があります。

0
Ben Rudolph