0

CSS クラスのインスタンスがページ上にあるかどうかを確認するためのクロスブラウザー互換で軽量な方法を探しています。

たとえば、「myclass」を確認したい場合、またはページのどこかにある場合は true を返し、そうでない場合は false を返します。

私はこのような機能を試しましたが、うまくいきません:

function getElementsByClassName( clsName ) 
{ 
    var arr = new Array(); 
    var elems = document.getElementsByTagName("*");
    for ( var cls, i = 0; ( elem = elems[i] ); i++ )
    {
        if ( elem.className == clsName )
        {
            arr[arr.length] = elem;
        }
    }
    return arr;
} 
if ( getElementsByClassName('myclass').length >= 1) { 
    // yes, it's on the page
}

ありがとう。

4

3 に答える 3

3

jQueryセレクターとよく似たquerySelectorメソッドを使用できます

于 2012-09-27T20:36:32.770 に答える
3

次のようなものを試すことができます: http://jsfiddle.net/sK2zd/

コードを少し変更しただけですが、期待どおりの動作をしています。

function getElementsByClassName(clsName) {
    var arr = [];
    var elems = document.getElementsByTagName("*");
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].className == clsName) {
            arr.push(elems[i]);
        }
    }
    return arr;
}

window.onload = function () {
    var all_classes = getElementsByClassName('testing');
    if (all_classes.length > 0) {
        // yes, it's on the page
        alert("Found " + all_classes.length + " element(s) with class 'testing'");
    } else {
        alert("Found none");
    }
};

アップデート：

この回答を振り返ってみると、プロパティはスペース文字で区切られた複数のクラスである可能性があるelems[i].className == clsNameため、おそらく正しくないことを示唆したことはないことに気付きました。classNameそのため、クラスがあるかどうかを確認するより良い方法が必要です。

于 2012-09-27T20:37:27.750 に答える
1

HTML5では、 CSS3セレクターでdocument.querySelectorAll（）を使用できます。

if (document.querySelectorAll('.the_class_name').length > 0) {
  doIt();
}
于 2012-09-27T20:36:11.820 に答える