“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议:

http://code.jquery.com/jquery-1.5.js

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

https://jsfiddle.net/5sv30bhe/

这个“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); }