Kyl*_*yle 278 javascript dom
你如何hasClass用简单的'JavaScript' 来做jQuery ？例如,
<body class="foo thatClass bar">
什么是JavaScript方式询问是否<body>有thatClass？
Dam*_*ien 838
只需使用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');
浏览器支持:
SLa*_*aks 117
你可以检查是否element.className匹配/\bthatClass\b/.
\b匹配一个分词.
或者,您可以使用jQuery自己的实现:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 )
要回答更一般的问题,您可以在github或源代码中查看jQuery的源代码,hasClass特别是在此源查看器中.
rav*_*ren 35
最有效的一个班轮
thisClass具有的元素时不会返回误报class="thisClass-suffix".function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
小智 28
// 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>Orb*_*ing 25
存储正在使用的类的属性是className.
所以你可以说:
if (document.body.className.match(/\bmyclass\b/)) {
....
}
如果你想要一个位置向你展示jQuery如何做所有事情,我会建议:
http://code.jquery.com/jquery-1.5.js
Gaw*_*win 12
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();
};
the*_*dnp 11
我使用简单/最小化解决方案,一行,跨浏览器,并与旧版浏览器一起使用:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'
这种方法很棒,因为不需要填充,如果你使用它,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;
}
对于其他类操作,请在此处查看完整文件.
小智 9
一个很好的解决方案是使用classList和contains.
我是这样做的:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...
所以你需要你的元素并检查类的列表.如果其中一个类与您搜索的类相同,则返回true,否则返回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
};
使用类似的东西:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}
$(element).hasClass('example')您可以element.matches('.example')在纯 JavaScript 中使用，而不是在 jQuery中：
if (element.matches('.example')) {
// Element has example class ...
}
| 归档时间： |
|
| 查看次数： |
340618 次 |
| 最近记录： |