“hasClass”与JavaScript？
你如何做jQuery的hasClass用普通的hasClass ？ 例如，
<body class="foo thatClass bar">
什么是JavaScript的方式来问，如果body有“thatClass”？
您可以检查element.className是否匹配/\bthatClass\b/ 。
\b匹配一个词的中断。
或者，你可以使用jQuery自己的实现：
var className = " " + selector + " "; if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 )
要回答您的更一般的问题，您可以在github上查看jQuery的源代码 ，或者在源代码查看器中专门查看hasClass的源代码 。
简单的使用classList ：
if (document.body.classList.contains('thatClass')) { // do some stuff }
classList其他用途：
document.body.classList.add('thisClass'); // $('body').addClass('thisClass'); document.body.classList.remove('thatClass'); // $('body').removeClass('thatClass'); document.body.classList.toggle('anotherClass'); // $('body').toggleClass('anotherClass');
浏览器支持：
- Chrome 8.0
- Firefox 3.6
- IE 10
- 歌剧11.50
- Safari 5.1
classList浏览器支持
最有效的一个class轮
- 返回一个布尔值（而不是Orbling的答案）
- 在
class="thisClass-suffix"的元素上searchthisClass时不返回误报。 - 与每个浏览器兼容至lessIE6
function hasClass( target, className ) { return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className); }
存储正在使用的类的属性是className 。
所以你可以说：
if (document.body.className.match(/\bmyclass\b/)) { .... }
如果你想要一个显示jQuery如何做所有事情的位置，我会build议：
// 1. Use if for see that classes: if (document.querySelector(".section-name").classList.contains("section-filter")) { alert("Grid section"); // code... }
<!--2. Add a class in the .html:--> <div class="section-name section-filter">...</div>
我使用一个简单的/最小的解决scheme，一行，跨浏览器，并使用旧版浏览器：
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'
这个方法非常好，因为不需要使用classList ，如果你使用它们作为classList它在性能方面要好得多。 至less对于我来说。
更新：我做了一个小的polyfill，这是我现在使用的全面解决scheme：
function hasClass(element,testClass){ if ('classList' in element) { return element.classList.contains(testClass); } else { return new Regexp(testClass).exec(element.className); } // this is better //} else { return el.className.indexOf(testClass) != -1; } // this is faster but requires indexOf() polyfill return false; }
对于其他类的操作，请看这里的完整文件。
hasClassfunction：
HTMLElement.prototype.hasClass = function(cls) { var i; var classes = this.className.split(" "); for(i = 0; i < classes.length; i++) { if(classes[i] == cls) { return true; } } return false; };
addClass函数：
HTMLElement.prototype.addClass = function(add) { if (!this.hasClass(add)){ this.className = (this.className + " " + add).trim(); } };
removeClass函数：
HTMLElement.prototype.removeClass = function(remove) { var newClassName = ""; var i; var classes = this.className.replace(/\s{2,}/g, ' ').split(" "); for(i = 0; i < classes.length; i++) { if(classes[i] !== remove) { newClassName += classes[i] + " "; } } this.className = newClassName.trim(); };
一个很好的解决scheme是使用classList和contains。
我是这样做的：
... for ( var i = 0; i < container.length; i++ ) { if ( container[i].classList.contains('half_width') ) { ...
所以你需要你的元素，并检查类的列表。 如果其中一个类与您search的类相同，则返回true，否则返回false！
使用类似于：
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');
那么所有上述的答案都很好，但这是一个简单的函数，我鞭打。 它工作得很好。
function hasClass(el, cn){ var classes = el.classList; for(var j = 0; j < classes.length; j++){ if(classes[j] == cn){ return true; } } }
你对这种方法有什么看法？
<body class="thatClass anotherClass"> </body> var bodyClasses = document.querySelector('body').className; var myClass = new RegExp("thatClass"); var trueOrFalse = myClass.test( bodyClasses );
这个“hasClass”function可以在IE8 +，FireFox和Chrome中使用：
hasClass = function(el, cls) { var regexp = new RegExp('(\\s|^)' + cls + '(\\s|$)'), target = (typeof el.className === 'undefined') ? window.event.srcElement : el; return target.className.match(regexp); }
