19

問題

要素に複数のクラスがある場合、通常のプロパティ値のチェックと一致しないため、要素の className プロパティにオブジェクトの特定のクラスがあるかどうかを確認する最良の方法を探しています。

例

// element's classname is 'hello world helloworld'
var element = document.getElementById('element');

// this obviously fails
if(element.className == 'hello'){ ... }

// this is not good if the className is just 'helloworld' because it will match
if(element.className.indexOf('hello') != -1){ ... }

では、これを行う最善の方法は何でしょうか?

純粋なJavaScriptでお願いします

4

6 に答える 6

38 
function hasClass( elem, klass ) {
     return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
}
于 2012-06-09T11:25:07.120 に答える
26

最新のブラウザーでは、classListを使用できます。

if (element.classList.contains("hello")) {
   // do something
}

DOM のプロトタイプを実装していないclassListが公開しているブラウザーでは、リンクに示されている shim を使用できます。

それ以外の場合は、同じ shim のコードを使用して、プロトタイプを操作せずに汎用関数を作成できます。

于 2012-06-09T11:31:18.353 に答える
1

この2018年はES6を使用

const hasClass = (el, className) => el.classList.contains(className);

使い方

hasClass(document.querySelector('div.active'), 'active'); // true
于 2018-02-23T07:25:13.210 に答える
0

純粋な JavaScript を要求するため、jQuery は次のように実装します。

    hasClass: function( selector ) {
        var className = " " + selector + " ",
            i = 0,
            l = this.length;
        for ( ; i < l; i++ ) {
            if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) {
                return true;
            }
        }
        return false;
    },

rclass[\n\t\r]クラス名を区切る別の方法が問題にならないようにするために、は の正規表現です。thisオブジェクトへのjQueryの参照であり、ある意味ではコードを必要以上に複雑にしますが、詳細を知らなくても意味があるはずです。

于 2012-06-09T11:27:26.903 に答える
0

これはあなたのために働くはずです： 

var a = [];
function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];

    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0, j=els.length; i<j; i++)
        if(re.test(els[i].className)) a.push(els[i]);
        return a;
}

getElementsByClassName('wrapper');
for (var i=0; i< a.length; i++) {
    console.log(a[i].className);
}

このコードは DOM をトラバースし、メイン関数でパラメーターとして定義されたクラスを検索します。次に、正規表現パターンを使用して、作成された各クラス要素をテストします。見つかった場合は配列にプッシュし、結果を出力します。

于 2012-06-09T12:25:11.047 に答える
-1

まず、「」文字を使用して className を分割し、検索するクラスのインデックスを確認します。

function hasClass(element, clazz) {
    return element.className.split(" ").indexOf(clazz) > -1;
}
于 2012-06-09T11:37:19.100 に答える