blocks|key|992180|text|您可以检查element.className是否与/\bthatClass\b/匹配。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|992181|\b匹配断字符。|992182|或者，您可以使用jQuery自己的实现：|992183|var+className+=+"+"+%2B+selector+%2B+"+";
if+(+("+"+%2B+element.className+%2B+"+").replace(/[\n\t]/g,+"+").indexOf("+thatClass+")+>+-1+)+|code-block|syntax|javascript|992184|要回答您更一般的问题，您可以查看github上的jQuery的source+code或hasClass+specifically+in+this+source+viewer的源代码。|992185|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jquery/jquery|1|http://james.padolsey.com/jquery/#v=1.5.0&fn=jQuery.fn.hasClass^0|5|H|P|F|0|0|2|0|0|0|17|8|V|B|0|17|17|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|19|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@$9|1D|A|1E|1|1F]|$9|1G|A|1H|1|1I]]|E|$]]|$1|Q|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

You can check whether <code>element.className</code> matches <code>/\bthatClass\b/</code>. 
<code>\b</code> matches a word break.

Or, you can use jQuery's own implementation:

<pre><code>var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") &gt; -1 ) 
</code></pre>

To answer your more general question, you can look at jQuery's <a href="https://github.com/jquery/jquery" rel="noreferrer">source code</a> on github or at the source for <a href="http://james.padolsey.com/jquery/#v=1.5.0&amp;fn=jQuery.fn.hasClass" rel="noreferrer"><code>hasClass</code> specifically in this source viewer</a>.

blocks|key|992336|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992337|//+1.+Use+if+for+see+that+classes:

if+(document.querySelector(".section-name").classList.contains("section-filter"))+{
++alert("Grid+section");
++//+code...
}|code-block|syntax|javascript|992338|

<div+class="section-name+section-filter">...</div>|992339|992340|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 1. Use if for see that classes:

if (document.querySelector(".section-name").classList.contains("section-filter")) {
 alert("Grid section");
 // code...
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--2. Add a class in the .html:--&gt;

&lt;div class="section-name section-filter"&gt;...&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|992243|text|存储正在使用的类的属性是className。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|992244|所以你可以说：|992245|if+(document.body.className.match(/\bmyclass\b/))+{
++++....
}|code-block|syntax|javascript|992246|如果你想要一个向你展示jQuery如何做每件事的位置，我建议：|992247|http://code.jquery.com/jquery-1.5.js|992248|entityMap|0|LINK|mutability|MUTABLE|url^0|C|9|0|0|0|0|0|10|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|12|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|Q|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|P]]]]

The attribute that stores the classes in use is <code>className</code>.

So you can say:

<pre><code>if (document.body.className.match(/\bmyclass\b/)) {
 ....
}
</code></pre>

If you want a location that shows you how jQuery does everything, I would suggest:

<a href="http://code.jquery.com/jquery-1.5.js" rel="noreferrer">http://code.jquery.com/jquery-1.5.js</a>

blocks|key|992621|text|hasClass函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992622|HTMLElement.prototype.hasClass+=+function(cls)+{
++++var+i;
++++var+classes+=+this.className.split("+");
++++for(i+=+0;+i+<+classes.length;+i%2B%2B)+{
++++++++if(classes[i]+==+cls)+{
++++++++++++return+true;
++++++++}
++++}
++++return+false;
};|code-block|syntax|javascript|992623|addClass函数：|992624|HTMLElement.prototype.addClass+=+function(add)+{
++++if+(!this.hasClass(add)){
++++++++this.className+=+(this.className+%2B+"+"+%2B+add).trim();
++++}
};|992625|removeClass函数：|992626|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%2B%2B)+{
++++++++if(classes[i]+!==+remove)+{
++++++++++++newClassName+%2B=+classes[i]+%2B+"+";
++++++++}
++++}
++++this.className+=+newClassName.trim();
};|992627|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

hasClass function:

<pre class="lang-js prettyprint-override"><code>HTMLElement.prototype.hasClass = function(cls) {
 var i;
 var classes = this.className.split(" ");
 for(i = 0; i &lt; classes.length; i++) {
 if(classes[i] == cls) {
 return true;
 }
 }
 return false;
};
</code></pre>

addClass function:

<pre class="lang-js prettyprint-override"><code>HTMLElement.prototype.addClass = function(add) {
 if (!this.hasClass(add)){
 this.className = (this.className + " " + add).trim();
 }
};
</code></pre>

removeClass function:

<pre class="lang-js prettyprint-override"><code>HTMLElement.prototype.removeClass = function(remove) {
 var newClassName = "";
 var i;
 var classes = this.className.replace(/\s{2,}/g, ' ').split(" ");
 for(i = 0; i &lt; classes.length; i++) {
 if(classes[i] !== remove) {
 newClassName += classes[i] + " ";
 }
 }
 this.className = newClassName.trim();
};
</code></pre>

blocks|key|778169|text|我使用一个简单/最小的解决方案，一行，跨浏览器，也可以使用传统的浏览器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|778170|/\bmyClass/.test(document.body.className)+//+notice+the+\b+command+for+whole+word+'myClass'|code-block|syntax|javascript|778171|这种方法很棒，因为它不需要polyfills，而且如果您将它们用于classList，则在性能方面要好得多。至少对我来说是这样。|offset|length|style|CODE|778172|更新:我做了一个小的多边形填充，这是我现在使用的一个全面的解决方案：|778173|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;
}|778174|有关其他类的操作，请参阅完整的文件here。|778175|entityMap|0|LINK|mutability|MUTABLE|url|http://polyfill.io/|1|https://github.com/thednp/minifill/blob/master/classList.js^0|0|0|X|9|D|9|0|0|0|0|H|4|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@$I|15|J|16|K|L]]|9|@$I|17|J|18|1|19]]|A|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@$I|1D|J|1E|1|1F]]|A|$]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

I use a simple/minimal solution, one line, cross browser, and works with legacy browsers as well:

<pre><code>/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'
</code></pre>

This method is great because does not require <a href="http://polyfill.io" rel="noreferrer">polyfills</a> and if you use them for <code>classList</code> it's much better in terms of performance. At least for me.

Update: I made a tiny polyfill that's an all round solution I use now:

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

For the other class manipulation, see the complete file <a href="https://github.com/thednp/minifill/blob/master/classList.js" rel="noreferrer">here</a>.

blocks|key|992698|text|Element.matches()|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992699|您可以在纯JavaScript中使用element.matches('.example')，而不是jQuery中的$(element).hasClass('example')：|offset|length|style|CODE|992700|if+(element.matches('.example'))+{
++//+Element+has+example+class+...
}|code-block|syntax|javascript|992701|View+Browser+Compatibility|992702|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Browser_compatibility^0|0|I|R|1L|U|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<h3>Element.matches()</h3>
Instead of <code>$(element).hasClass('example')</code> in jQuery, you can use <code>element.matches('.example')</code> in plain JavaScript:
<pre><code>if (element.matches('.example')) {
 // Element has example class ...
}
</code></pre>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Browser_compatibility" rel="noreferrer">View Browser Compatibility</a>

blocks|key|778075|text|一个很好的解决方案是使用classList和contains。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|778076|我是这样做的：|778077|...+for+(+var+i+=+0;+i+<+container.length;+i%2B%2B+)+{
++++++++if+(+container[i].classList.contains('half_width')+)+{+...|code-block|syntax|javascript|778078|所以你需要你的元素并检查类的列表。如果其中一个类与您搜索的类相同，它将返回true，否则将返回false！|778079|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

a good solution for this is to work with classList and contains.

i did it like this:

<pre><code>... for ( var i = 0; i &lt; container.length; i++ ) {
 if ( container[i].classList.contains('half_width') ) { ...
</code></pre>

So you need your element and check the list of the classes. If one of the classes is the same as the one you search for it will return true if not it will return false!

blocks|key|992613|text|使用像这样的东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992614|Array.prototype.indexOf.call(myHTMLSelector.classList,+'the-class');|code-block|syntax|javascript|992615|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use something like:

<pre><code>Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');
</code></pre>

blocks|key|778264|text|if+(document.body.className.split(/\s%2B/).indexOf("thatClass")+!==+-1)+{
++++//+has+"thatClass"
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|778265|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
 // has "thatClass"
}
</code></pre>

blocks|key|778231|text|这个'hasClass‘函数适用于IE8%2B，FireFox和Chrome：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|778232|hasClass+=+function(el,+cls)+{
++++var+regexp+=+new+RegExp('(\\s%7C%5E)'+%2B+cls+%2B+'(\\s%7C$)'),
++++++++target+=+(typeof+el.className+===+'undefined')+?+window.event.srcElement+:+el;
++++return+target.className.match(regexp);
}|code-block|syntax|javascript|778233|更新了2021年1月的一个更好的方式：|778234|hasClass+=+(el,+cls)+=>+{
++[...el.classList].includes(cls);+//cls+without+dot
};|778235|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This 'hasClass' function works in IE8+, FireFox and Chrome:
<pre><code>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);
}
</code></pre>
[Updated Jan'2021] A better way:
<pre><code>hasClass = (el, cls) =&gt; {
 [...el.classList].includes(cls); //cls without dot
};
</code></pre>

blocks|key|992322|text|上面所有的答案都很好，但这里有一个小而简单的函数。它工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992323|function+hasClass(el,+cn){
++++var+classes+=+el.classList;
++++for(var+j+=+0;+j+<+classes.length;+j%2B%2B){
++++++++if(classes[j]+==+cn){
++++++++++++return+true;
++++++++}
++++}
}|code-block|syntax|javascript|992324|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Well all of the above answers are pretty good but here is a small simple function I whipped up. It works pretty well. 

<pre><code>function hasClass(el, cn){
 var classes = el.classList;
 for(var j = 0; j &lt; classes.length; j++){
 if(classes[j] == cn){
 return true;
 }
 }
}
</code></pre>

blocks|key|778189|text|你对这种方法有什么看法？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|778190|<body+class="thatClass+anotherClass">+</body>

var+bodyClasses+=+document.querySelector('body').className;
var+myClass+=+new+RegExp("thatClass");
var+trueOrFalse+=+myClass.test(+bodyClasses+);|code-block|syntax|javascript|778191|https://jsfiddle.net/5sv30bhe/|offset|length|778192|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|U|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

What do you think about this approach?

<pre><code>&lt;body class="thatClass anotherClass"&gt; &lt;/body&gt;

var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );
</code></pre>

<a href="https://jsfiddle.net/5sv30bhe/" rel="nofollow">https://jsfiddle.net/5sv30bhe/</a>

How do you do jQuery’s <code>hasClass</code> with plain ol’ JavaScript? For example,

<pre class="lang-html prettyprint-override"><code>&lt;body class="foo thatClass bar"&gt;
</code></pre>

What’s the JavaScript way to ask if <code>&lt;body&gt;</code> has <code>thatClass</code>?

What is the "hasClass" function with plain JavaScript?

jQuery

如何用普通的JavaScript来做jQuery的hasClass？例如,<body class="foo thatClass bar">问<body>是否有thatClass的JavaScript方式是什么

问普通JavaScript的"hasClass“函数是什么？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问普通JavaScript的"hasClass“函数是什么？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问普通JavaScript的"hasClass“函数是什么？
EN