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 中，您可以将document.querySelectorAll()与CSS3 选择器一起使用。

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