什么是“hasclass”;函数与纯JavaScript?

你如何做jQuery的hasClass与平原ol ' JavaScript?例如,

<body class="foo thatClass bar">

JavaScript用什么方法问<body>是否有thatClass?

615370 次浏览
小开
最佳答案

你可以检查element.className是否匹配/\bthatClass\b/

. \b匹配换行符

或者，你可以使用jQuery自己的实现:

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

要回答你更普遍的问题，你可以在github上查看jQuery的源代码或hasClass特别是在这个源查看器中的源代码。

小开

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

所以你可以说:

if (document.body.className.match(/\bmyclass\b/)) {
....
}

如果你想要一个显示jQuery如何做所有事情的位置，我建议:

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

小开

其中最有效的一句话就是

  • 返回一个布尔值(与Orbling的答案相反)
  • 在具有class="thisClass-suffix"的元素上搜索thisClass时不返回假阳性。
  • 能兼容IE6以下的所有浏览器吗
function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
小开

简单地使用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浏览器支持

小开

好吧，上面所有的答案都很好，但这里有一个简单的小函数。它运行得很好。

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

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

小开

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

我是这样做的:

... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...

因此，您需要元素并检查类列表。如果其中一个类与你搜索的类相同，它将返回true，如果不是，它将返回false!

小开

我使用一个简单/最小的解决方案，一行，跨浏览器，并与传统浏览器一起工作:

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

这个方法很棒，因为它不需要polyfills，如果你将它们用于classList，它在性能方面要好得多。至少对我来说是这样。

更新:我做了一个小的填充，这是一个全方位的解决方案，我现在使用:

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

对于其他类操作，请参阅完整文件在这里。

小开

你对这种方法有什么看法?

<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'函数适用于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
};
小开

可以使用以下语句:

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

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();
};
小开 
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}
小开

Element.matches ()

你可以在纯JavaScript中使用element.matches('.example')，而不是jQuery中的$(element).hasClass('example'):

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

查看浏览器兼容性


提交答案