如何做jQuery的hasClass与平原ol ' JavaScript?例如,
<body class="foo thatClass bar">
JavaScript中询问<body>是否有thatClass的方法是什么?
如何做jQuery的hasClass与平原ol ' JavaScript?例如,
<body class="foo thatClass bar">
JavaScript中询问<body>是否有thatClass的方法是什么?
当前回答
只需使用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
浏览器支持
其他回答
您可以检查元素是否。className匹配/\bthatClass\b/。 \b匹配一个换行符。
或者,你可以使用jQuery自己的实现:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 )
要回答你更普遍的问题,你可以在github上查看jQuery的源代码,或者在这个源代码查看器中查看hasClass的源代码。
可以使用以下语句:
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();
};
Element.matches ()
而不是jQuery中的$(element).hasClass('example'),你可以在纯JavaScript中使用element.matches('.example'):
if (element.matches('.example')) {
// Element has example class ...
}
查看浏览器兼容性
好吧,上面所有的答案都很好,但这里有一个简单的小函数。它运行得很好。
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}