testing一个元素是否包含一个类？
使用普通的JavaScript（而不是jQuery），有没有一种方法可以testing一个元素是否包含一个类？
目前，我正在这样做：
HTML：
<div id="test" class="class1"></div>; JS：
var test = document.getElementById("test"); var testClass = test.className; switch(testClass){ case "class1": test.innerHTML = "I have class1"; break; case "class2": test.innerHTML = "I have class2"; break; case "class3": test.innerHTML = "I have class3"; break; case "class4": test.innerHTML = "I have class4"; break; default: test.innerHTML = ""; }
这导致这个输出，这是正确的：
I have class1
问题是，如果我改变这个HTML …
<div id="test" class="class1 class5"></div>
…不再有完全匹配，所以我得到默认输出没有（ "" ）。 但我仍然希望输出是I have class1因为<div>仍然包含 .class1类。
使用element.classList .contains方法：
element.classList.contains(class);
这适用于所有目前的浏览器，也有支持旧浏览器的polyfills。
或者 ，如果您使用旧浏览器并且不想使用polyfill来修复它们，使用indexOf是正确的，但是您必须稍微调整一下：
function hasClass(element, class) { return (' ' + element.className + ' ').indexOf(' ' + class+ ' ') > -1; }
否则，如果您正在查找的课程是另一个class级名称的一部分，则也会变为true 。
DEMO
jQuery使用类似的（如果不是相同的）方法。
应用于这个例子：
因为这不能和switch语句一起工作，所以你可以用这个代码实现同样的效果：
var test = document.getElementById("test"), classes = ['class1', 'class2', 'class3', 'class4']; test.innerHTML = ""; for(var i = 0, j = classes.length; i < j; i++) { if(hasClass(test, classes[i])) { test.innerHTML = "I have " + classes[i]; break; } }
这也less了多余的;）
简单有效的解决方法是尝试.contains方法。
test.classList.contains(testClass);
在现代浏览器中，可以使用Element.classList的contains方法：
testElement.classList.contains(className)
演示
var testElement = document.getElementById('test'); console.log({ 'main' : testElement.classList.contains('main'), 'cont' : testElement.classList.contains('cont'), 'content' : testElement.classList.contains('content'), 'main-cont' : testElement.classList.contains('main-cont'), 'main-content' : testElement.classList.contains('main-content') });
<div id="test" class="main main-content content"></div>
既然他想用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/>"; } }
简化的指引： 1
function hasClassName(classname,id) { return String ( ( document.getElementById(id)||{} ) .className ) .split(/\s/) .indexOf(classname) >= 0; }
IE（ofcourse）不支持数组1的 indexOf 。 网上有很多猴子补丁可以find。
这有点旧，但也许有人会发现我的解决scheme有帮助：
// 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; } }
className只是一个string，所以你可以使用常规的indexOf函数来查看类的列表是否包含另一个string。
这是一个不区分大小写的简单解决scheme：
function hasClass(element, classNameToTestFor) { var classNames = element.className.split(' '); for (var i = 0; i < classNames.length; i++) { if (classNames[i].toLowerCase() == classNameToTestFor.toLowerCase()) { return true; } } return false; }
这里是一个小小的片段如果你试图检查包含一个类的元素，而不使用jQuery。
function hasClass(element, className) { return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className); }
这说明元素可能包含多个由空格分隔的类名。
要么
您也可以将此function分配给元素原型。
Element.prototype.hasClass = function(className) { return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className); };
并像这样触发（非常类似于jQuery的.hasClass（）函数）：
document.getElementById('MyDiv').hasClass('active');
我知道有很多的答案，但其中大部分是为了额外的function和额外的类。 这是我个人使用的; 更清洁，更less的代码行！
if( document.body.className.match('category-page') ) { console.log('yes'); }
如果可能的话，我创build了一个使用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 "ac": ', elm1.hasClass('a c') ); console.log( elm1, ' has class "ad": ', 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='ab 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>
-
费利克斯的窍门是在类名和要search的string旁边添加空格是判断元素是否具有类的正确方法。
-
要根据类有不同的行为，可以在地图中使用函数引用或函数：
function fn1(element){ /* code for element with class1 */ } function fn2(element){ /* code for element with class2 */ } function fn2(element){ /* code for element with class3 */ } var fns={'class1': fn1, 'class2': fn2, 'class3': fn3}; for(var i in fns) { if(hasClass(test, i)) { fns[i](test); } }- for（var i in fns）遍历fns映射中的键。
- fnsi之后没有中断允许代码在匹配的时候被执行 – 所以如果元素有fi，class1和class2，那么fn1和fn2都会被执行。
- 这种方法的优点是每个类执行的代码是任意的，就像switch语句中的代码一样; 在你的例子中，所有的情况都进行了类似的操作，但是明天你可能需要为每个事情做不同的事情。
- 你可以通过一个状态variables来模拟默认情况，告诉循环中是否有匹配。
我认为完美的解决scheme就是这个
if ($(this).hasClass("your_Class")) alert("positive"); else alert("Negative");
我会聚填充类的function，并使用新的语法。 这种方式新的浏览器将使用新的实现（这是更快），只有旧的浏览器会从代码性能命中。
如果元素只有一个类名，可以通过获取类属性来快速检查它。 其他的答案更强大，但这肯定是它的用例。
if ( element.getAttribute('class') === 'classname' ) { }
试试这个：
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; };
在哪个元素当前是类“.bar”？ 这是另一个解决scheme，但这取决于你。
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>是/LI/g ， <ul> = /UL/g等。
这是有点closures，但如果你有一个事件触发切换，你可以没有类：
<div id="classOne1"></div> <div id="classOne2"></div> <div id="classTwo3"></div>
你可以做
$('body').click( function() { switch ( this.id.replace(/[0-9]/g, '') ) { case 'classOne': this.innerHTML = "I have classOne"; break; case 'classTwo': this.innerHTML = "I have classTwo"; break; default: this.innerHTML = ""; } });
.replace(/[0-9]/g, '')从id删除数字。
这是一个有点哈克，但适用于没有额外的function或循环长开关
看到这个Codepen的链接，如果它有一个特定的类使用香草JavaScript~~检查一个元素更快，更简单的方法！
hasClass（香草JS）
function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; }
