你如何用普通的 JavaScript 处理 jQuery 的 hasClass？例如，
<body class="foo thatClass bar">
询问<body> 是否有thatClass 的JavaScript 方法是什么？
【问题讨论】：
class 属性（在多个类的情况下将有多个类名以随机顺序由空格分隔）并检查你的类名是否在其中。不是很困难，但如果不是为了学习目的，仍然很不方便:)
标签： javascript dom
这个 'hasClass' 函数适用于 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);
}
[2021 年 1 月更新] 更好的方法：
hasClass = (el, cls) => {
[...el.classList].includes(cls); //cls without dot
};
【讨论】：
[...el.classList].contains(cls); 用于 2021 年的更新，对吧？
您可以在纯 JavaScript 中使用 element.matches('.example')，而不是 jQuery 中的 $(element).hasClass('example')：
if (element.matches('.example')) {
// Element has example class ...
}
【讨论】：
hasClass = (el, name) => el.matches('.'+name) ? 1 : 0
只需使用classList.contains():
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');
浏览器支持：
【讨论】：
.classList 检索为字符串，但它不会识别更现代的方法，例如.classList.contains()
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}
【讨论】：
使用类似的东西：
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');
【讨论】：
myHTMLSelector.classList.indexOf('the-class')吗？最后你不也想要>=0吗？
classList 有contains 方法，那么使用[].indexOf 有什么意义？
myHTMLSelector.classList.indexOf('the-class') 返回 myHTMLSelector.classList.indexOf is not a function 的错误，因为 myHTMLSelector.classList 不是数组。但我想当使用Array.prototype 调用它时会发生一些转换。这可能支持旧版浏览器，虽然contains 有很好的支持。
hasClass 函数：
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;
};
添加类函数：
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();
};
【讨论】：
最有效的一种衬里
class="thisClass-suffix" 的元素上搜索thisClass 时不会返回误报。function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
【讨论】：
我使用一个简单/最小的解决方案，单行，跨浏览器，并且也适用于旧版浏览器：
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'
这种方法很棒，因为不需要polyfills，如果你将它们用于classList，它在性能方面会好得多。至少对我来说。
更新：我制作了一个小型 polyfill，这是我现在使用的全方位解决方案：
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;
}
有关其他类操作，请参阅完整文件here。
【讨论】：
notmyClassHere的班级？
!/myClass/.test(document.body.className)，请注意! 符号。
thisIsmyClassHere，您的函数将不正确地返回 true。
您如何看待这种方法？
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );
【讨论】：
class="nothatClassIsnt" 产生误报吗？
一个很好的解决方案是使用 classList 和 contains。
我是这样做的：
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...
所以你需要你的元素并检查类列表。如果其中一个类与您搜索的类相同，则返回 true，否则返回 false！
【讨论】：
// 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>【讨论】：
以上所有答案都非常好，但这是我创建的一个简单的小功能。它工作得很好。
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}
【讨论】：
classList 有contains 方法，那么迭代有什么意义？
您可以检查element.className 是否与/\bthatClass\b/ 匹配。\b 是否匹配分词符。
或者，你可以使用jQuery自己的实现：
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 )
要回答您更一般的问题，您可以查看 github 上的 jQuery source code 或 hasClass specifically in this source viewer 的源代码。
【讨论】：
rclass 实际上是什么；））
\b 匹配“thatClass-anotherClass”？
/[\t\r\n\f]/g。另外值得一提的是，/\bclass\b/ 对于带有- 减号的类名可能会失败（除了它工作得很好），这就是为什么 jQuery 的实现更好、更可靠的原因。例如：/\bbig\b/.test('big-text') 返回 true 而不是预期的 false。
存储正在使用的类的属性是className。
所以你可以说：
if (document.body.className.match(/\bmyclass\b/)) {
....
}
如果你想要一个展示 jQuery 如何做所有事情的位置，我建议：
【讨论】：
match 属性又派上用场了！ jQuery 真的做的事情比 JavaScript 做的还多吗？！如果没有，jQuery 只是一个不必要的速记。
myclass-something，因为\b 匹配连字符。