使用纯JavaScript(不是jQuery),是否有任何方法来检查元素是否包含类?

目前,我正在这样做:

var test = document.getElementById("test"); var testClass = test.className; switch (testClass) { 例“class1”: 测试。innerHTML = "我有class1"; 打破; 例“class2”: 测试。innerHTML = "I have class2"; 打破; 例“class3”: 测试。innerHTML = "I have class3"; 打破; “一年级”情况: 测试。innerHTML = "I have class4"; 打破; 默认值: 测试。innerHTML = ""; } <div id="test" class="class1"></div>

问题是,如果我把HTML改成这个…

<div id="test" class="class1 class5"></div>

...不再有一个精确的匹配,所以我得到的默认输出为nothing("")。但我仍然希望输出为I have class1,因为<div>仍然包含。class1类。


当前回答

试试这个:

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;
};

其他回答

我认为完美的解是这个

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

这有点过时了,但也许有人会发现我的解决方案很有帮助:

// 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;
    }
}

因为他想使用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/>";
    }
}

在哪个元素中当前是类的。酒吧”?这里有另一个解决方案,但取决于你。

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演示

当然,这只是查找一个简单的元素<img>(/Image/g),但您可以将所有元素放在一个数组中,如<li> is / li /g, <ul> = / ul /g等。

我已经创建了一个使用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>

测试页面