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

首先，使用“ ”字符拆分类名，然后检查要查找的类的索引。

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