Wie machen Sie jQuery's hasClass mit einfachem altem JavaScript? Zum Beispiel,
<body class="foo thatClass bar">Wie lautet die JavaScript-Methode, um zu fragen, ob <body> hat thatClass ?
Antworten
Zu viele Anzeigen?
Grant Miller
Punkte
23839
Gawin
Punkte
984
HasClass-Funktion:
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-Funktion:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};removeClass-Funktion:
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();
};
thednp
Punkte
4251
Ich verwende eine einfache/minimale Lösung, eine Zeile, browserübergreifend und funktioniert auch mit älteren Browsern:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'Diese Methode ist großartig, weil sie keine Polyfills und wenn Sie sie verwenden für classList Es ist viel besser in Bezug auf die Leistung. Zumindest für mich.
Update: Ich habe eine kleine Polyfill-Lösung entwickelt, die ich jetzt verwende:
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;
}Für die anderen Klassenmanipulationen, siehe die vollständige Datei aquí .
Bastian Fießinger
Punkte
325
Eine gute Lösung für dieses Problem ist die Arbeit mit classList und contains.
Ich habe es so gemacht:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...Sie benötigen also Ihr Element und prüfen die Liste der Klassen. Wenn eine der Klassen mit der gesuchten übereinstimmt, wird true zurückgegeben, wenn nicht, wird false zurückgegeben!
manufosela
Punkte
329
Diese "hasClass"-Funktion funktioniert in IE8+, FireFox und 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);
}[Aktualisiert Jan'2021] Ein besserer Weg:
hasClass = (el, cls) => {
[...el.classList].includes(cls); //cls without dot
};
