普通JavaScript的“ hasClass”函数是什么？

jQuery的hasClass如何使用普通的JavaScript？例如，

 <body class="foo thatClass bar">

问问<body>是否具有thatClass的JavaScript方法是什么？ />

我想您将必须解析class属性（在多个类的情况下，将以随机顺序将多个类名隔开，并以空格分隔），并检查您的类名是否在其中。不是很困难，但是如果不是出于学习目的，还是很不方便:)

不知道我参加聚会是否迟到，但是可以替代jQuery函数的好网站是youmightnotneedjquery.com

#1 楼

您可以检查element.className是否与/\bthatClass\b/相匹配。 \b匹配一个分词符。

或者，您可以使用jQuery自己的实现：在github上的jQuery的源代码中或在此源代码查看器中的hasClass的源代码中。

+1为jQuery实现（对于查找（这是正确的英语吗？）实际上是rclass是;））

–费利克斯·克林（Felix Kling）
2011-2-23在0:15

\ b不会匹配“ thatClass-anotherClass”吗？

–马修·克鲁姆利
2011年2月23日下午1:00

仅出于完整性考虑：最新版本中的rclass为“ / [\ n \ t \ r] / g”（已添加\ r）

–费利克斯·施瓦茨（Felix Schwarz）
2013年1月16日13:32

@FelixSchwarz是正确的，在当前的jQuery中，正则表达式已更新为/ [\ t \ r \ n \ f] / g。同样值得一提的是，/ \ bclass \ b /对于带有-减号的类名可能会失败（除了它很好用），这就是jQuery的实现更好，更可靠的原因。例如：/\bbig\b/.test('big-text'）返回true而不是预期的false。

– Stano
13年6月18日在18:43

当原始问题要求非jQuery实现时，此讨论如何变成jQuery？

– David Maness
20年7月6日在16:02

#2 楼

只需使用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');

浏览器支持：

Chrome 8.0
Firefox 3.6
IE 10
Opera 11.50
Safari 5.1

classList浏览器支持

IE8不支持此功能。 IE8可以将.classList检索为字符串，但无法识别更现代的方法，例如.classList.contains（）

–iono
2013年9月10日4:14

@iono在MDN的Element.classList实现描述中，有一个垫片将对这种行为的支持扩展到IE8。

–詹姆斯
15年3月17日在18:23

我同意@AlexanderWigmore，这是非常有用和简单的。

–雅克·奥利维尔（Jacques Olivier）
18年8月7日在9:58

自2020年以来，这应该是可以接受的答案。因为没有人再谈论IE8 / WinXP。

–感谢Trung
20 Aug 25 '10：12

同意。 .. IE8已死。 IE通常已经死了。这应该是前进的方式。

– Emmanuel N K
20年8月28日在4:30

#3 楼

返回布尔值（与Orbling的答案相反）的最有效衬里
在具有thisClass的元素上搜索class="thisClass-suffix"时，不返回假阳性。 br />至少与IE6兼容，并且与每个浏览器兼容。

#4 楼

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

@greg_diesel：不要劝阻答案！对于常见问题的新解决方案非常受欢迎。

–raveren
2015年3月10日8:08

@Raveren虽然欢迎对旧问题的新解决方案，但这个特定答案并没有带来什么新变化。这只会增加这个问题的噪音。

– Emile Bergeron
16年3月3日在21:46

@raveren这不是一个新的解决方案，它与该答案相同，但是信息较少。

–莫妮卡基金的诉讼
18年5月19日在22:57

#5 楼

存储正在使用的类的属性是className。

因此，您可以说： jQuery会做所有事情，我建议：

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

优秀的。 match属性再次派上用场！真的jQuery所做的比JavaScript还要多吗？如果不是这样，则jQuery只是不必要的简写形式。

–animaacija
15年1月4日在21:35

这也匹配myclass-something，因为\ b匹配连字符。

– Marc Durdin
15年4月4日在22:20

@animaacija所有javascript库/插件基本上都是javascript的简写，因为它们是使用javascript构建的。事实是：速记总是必要的。永远不要重新发明轮子。

–爱德温·斯托特勒
16年7月14日在9:06

#6 楼

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;
};

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();
};

#7 楼

我使用一种简单/最小的解决方案，即单行，跨浏览器，也可以与旧版浏览器一起使用：您将它们用于classList在性能方面要好得多。至少对我来说。

更新：我做了一个很小的polyfill，这是我现在使用的全面解决方案：操作，请参阅此处的完整文件。

这次旅行是否会超过notmyClassHere类？

–帐篷
2015年10月4日0:00

您还可以询问您的班级是否也不在那里！/myClass/.test（document.body.className）注意！符号。

–thednp
2015年10月4日，0：56

我不是在谈论否定问题。我认为如果类名是thisIsmyClassHere，您的函数将不正确地返回true。

–帐篷
2015年10月4日在2:48

我只是在猜测这就是您要的内容，无法确切了解您的需求，但是您是否尝试过它，但按原样应该返回true / false失败了？

–thednp
2015年10月4日在17:51

这不是完美的，因为它不是子字符串证明。例如。当document.body.className ='myClass123'时，/myClass/.test(document.body.className）返回true ...

–克里斯·W
16 Mar 10 '16 at 19:50

#8 楼

一个很好的解决方案是使用classList和contains。

我是这样做到的：

检查课程列表。如果其中一个类别与您搜索的类别相同，则返回true，否则返回false！

#9 楼

使用类似的内容：

Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');

这不等于myHTMLSelector.classList.indexOf（'the-class'）吗？您还不想最后> = 0吗？

–帐篷
2015年10月3日23:58

如果classList有一个contains方法，使用[] .indexOf有什么意义？

– Oriol
16年6月12日在17:19

@Teepeemm号myHTMLSelector.classList.indexOf（'the-class'）返回以下错误：myHTMLSelector.classList.indexOf不是函数，因为myHTMLSelector.classList不是数组。但是我猜想在使用Array.prototype调用它时会发生一些转换。这可能支持较旧的浏览器，尽管包含了很好的支持。

– Ehsan88
20 Mar 6 '20 at 10:28

#10 楼

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

#11 楼

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

#12 楼

那么以上所有答案都很好，但这是我提出的一个简单的小功能。效果很好。

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

迭代classList是否具有contains方法有什么意义？

– Oriol
16年6月12日在17:20

#13 楼

您如何看待这种方法？

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

我认为您正在混合使用变量名（active === myClass？）。但是这种方法不会为class =“ nothatClassIsnt”带来误报吗？

–帐篷
2015年10月3日23:59

#14 楼

Element.matches（）
可以在普通JavaScript中使用$(element).hasClass('example')代替jQuery中的element.matches('.example')：

if (element.matches('.example')) {
  // Element has example class ...
}

查看浏览器兼容性

具有es6的hasClass插件... hasClass =（el，name）=> el.matches（'。'+ name）？ 1：0

–大卫·斯科特·柯比（David Scott Kirby）
20-10-21在23:04

#15 楼

这是仅使用javascript的最简单方法：

var allElements = document.querySelectorAll('*');
for (var i = 0; i < allElements.length; i++) {
    if (allElements[i].hasAttribute("class")) {
         //console.log(allElements[i].className);
         if (allElements[i].className.includes("_the _class ")) { 
              console.log("I see the class");
         }
    }
}

编程黑洞网