如何做jQuery的hasClass与平原ol ' JavaScript?例如,
<body class="foo thatClass bar">
JavaScript中询问<body>是否有thatClass的方法是什么?
当前回答
一个很好的解决方案是使用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'
这个方法很好，因为不需要填充，如果你把它们用于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;
}
有关其他类操作，请参阅此处的完整文件。
这个'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
};
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();
};
一个很好的解决方案是使用classList和contains。
我是这样做的:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...
因此，您需要元素并检查类列表。如果其中一个类与你搜索的类相同，它将返回true，如果不是，它将返回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/
