Überprüfen Sie, ob ein Element eine Klasse in JavaScript enthält.

Gibt es eine Möglichkeit, mit einfachem JavaScript (nicht jQuery) zu überprüfen, ob ein Element eine Klasse enthält ?

Derzeit mache ich das:

var test = document.getElementById("test");
var testClass = test.className;

switch (testClass) {
  case "class1":
    test.innerHTML = "I have class1";
    break;
  case "class2":
    test.innerHTML = "I have class2";
    break;
  case "class3":
    test.innerHTML = "I have class3";
    break;
  case "class4":
    test.innerHTML = "I have class4";
    break;
  default:
    test.innerHTML = "";
}

<div id="test" class="class1"></div>

Das Problem ist, dass, wenn ich den HTML-Code in diesen ...

<div id="test" class="class1 class5"></div>

... gibt es keine genaue Übereinstimmung mehr, daher erhalte ich die Standardausgabe von nothing ( ""). Aber ich möchte immer noch, dass die Ausgabe ist, I have class1weil die <div>noch die Klasse enthält.class1 .

Verwenden element.classList .contains Methode:

element.classList.contains(class);

Dies funktioniert in allen aktuellen Browsern und es gibt Polyfills, die auch ältere Browser unterstützen.

Alternativ , wenn Sie mit älteren Browsern arbeiten und keine Polyfills verwenden möchten, um diese zu beheben, verwenden SieindexOf ist richtig, aber man muss es ein wenig zwicken:

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

Andernfalls erhalten Sie auch, truewenn die gesuchte Klasse Teil eines anderen Klassennamens ist.

DEMO

jQuery verwendet eine ähnliche (wenn nicht dieselbe) Methode.

Auf das Beispiel angewendet:

Da dies nicht mit der switch-Anweisung zusammenarbeitet, können Sie mit diesem Code den gleichen Effekt erzielen:

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

Es ist auch weniger redundant;)

Die einfache und effektive Lösung ist die Methode .contains .

test.classList.contains(testClass);

In modernen Browsern können Sie einfach die folgende containsMethode verwenden Element.classList:

testElement.classList.contains(className)

Demo

var testElement = document.getElementById('test');

console.log({
    'main' : testElement.classList.contains('main'),
    'cont' : testElement.classList.contains('cont'),
    'content' : testElement.classList.contains('content'),
    'main-cont' : testElement.classList.contains('main-cont'),
    'main-content' : testElement.classList.contains('main-content')
});

<div id="test" class="main main-content content"></div>

Unterstützte Browser

(von CanIUse.com )

Polyfill

Wenn Sie Element.classListältere Browser verwenden möchten, aber auch ältere Browser unterstützen möchten, sollten Sie diese Polyfüllung von Eli Gray verwenden .

Da er switch () verwenden möchte, bin ich überrascht, dass dies noch niemand veröffentlicht hat:

var test = document.getElementById("test");
var testClasses = test.className.split(" ");
test.innerHTML = "";
for(var i=0; i<testClasses.length; i++) {
    switch(testClasses[i]) {
        case "class1": test.innerHTML += "I have class1<br/>"; break;
        case "class2": test.innerHTML += "I have class2<br/>"; break;
        case "class3": test.innerHTML += "I have class3<br/>"; break;
        case "class4": test.innerHTML += "I have class4<br/>"; break;
        default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>";
    }
}

Element.matches ()

element.matches (selectorString)

Laut MDN Web Docs :

Die Element.matches()Methode gibt zurück, trueob das Element durch die angegebene Auswahlzeichenfolge ausgewählt wird. Andernfalls wird zurückgegeben false.

Daher können Sie verwenden, Element.matches()um festzustellen, ob ein Element eine Klasse enthält.

const element = document.querySelector('#example');

console.log(element.matches('.foo')); // true

<div id="example" class="foo bar"></div>

Browserkompatibilität anzeigen

Hier ist ein kleiner Ausschnitt Wenn Sie überprüfen möchten, ob das Element eine Klasse enthält, ohne jQuery zu verwenden.

function hasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

Dies erklärt die Tatsache, dass das Element möglicherweise mehrere durch Leerzeichen getrennte Klassennamen enthält.

ODER

Sie können diese Funktion auch dem Elementprototyp zuweisen.

Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

Und lösen Sie es so aus (sehr ähnlich der .hasClass()Funktion von jQuery ):

document.getElementById('MyDiv').hasClass('active');

Ein vereinfachter Oneliner: ¹

function hasClassName(classname,id) {
 return  String ( ( document.getElementById(id)||{} ) .className )
         .split(/\s/)
         .indexOf(classname) >= 0;
}

¹ indexOf für Arrays wird vom IE (natürlich) nicht unterstützt. Dafür gibt es im Netz viele Affenfelder.

Das ist ein bisschen alt, aber vielleicht findet jemand meine Lösung hilfreich:

// Fix IE's indexOf Array
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement) {
        if (this == null) throw new TypeError();
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) return -1;
        var n = 0;
        if (arguments.length > 0) {
            n = Number(arguments[1]);
            if (n != n) n = 0;
            else if (n != 0 && n != Infinity && n != -Infinity) n = (n > 0 || -1) * Math.floor(Math.abs(n));
        }
        if (n >= len) return -1;
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) if (k in t && t[k] === searchElement) return k;
        return -1;
    }
}
// add hasClass support
if (!Element.prototype.hasClass) {
    Element.prototype.hasClass = function (classname) {
        if (this == null) throw new TypeError();
        return this.className.split(' ').indexOf(classname) === -1 ? false : true;
    }
}

classNameist nur eine Zeichenfolge, sodass Sie mit der regulären Funktion indexOf prüfen können, ob die Liste der Klassen eine andere Zeichenfolge enthält.

Ich kenne viele Antworten, aber die meisten sind für zusätzliche Funktionen und zusätzliche Klassen. Dies ist die, die ich persönlich benutze; viel sauberer und viel weniger Codezeilen!

if( document.body.className.match('category-page') ) { 
  console.log('yes');
}

Hier ist eine triviale Lösung, bei der die Groß- und Kleinschreibung nicht berücksichtigt wird:

function hasClass(element, classNameToTestFor) {
    var classNames = element.className.split(' ');
    for (var i = 0; i < classNames.length; i++) {
        if (classNames[i].toLowerCase() == classNameToTestFor.toLowerCase()) {
            return true;
        }
    }
    return false;
}

Wenn das Element nur einen Klassennamen hat, können Sie ihn schnell überprüfen, indem Sie das Klassenattribut abrufen. Die anderen Antworten sind viel robuster, aber dies hat sicherlich Anwendungsfälle.

if ( element.getAttribute('class') === 'classname' ) {

}

Ich habe eine Prototypmethode erstellt, die classList, wenn möglich, auf Folgendes zurückgreift indexOf:

Element.prototype.hasClass = Element.prototype.hasClass || 
  function(classArr){
    var hasClass = 0,
        className = this.getAttribute('class');
  
    if( this == null || !classArr || !className ) return false;
  
    if( !(classArr instanceof Array) )
      classArr = classArr.split(' ');

    for( var i in classArr )
      // this.classList.contains(classArr[i]) // for modern browsers
      if( className.split(classArr[i]).length > 1 )  
          hasClass++;

    return hasClass == classArr.length;
};


///////////////////////////////
// TESTS (see browser's console when inspecting the output)

var elm1 = document.querySelector('p');
var elm2 = document.querySelector('b');
var elm3 = elm1.firstChild; // textNode
var elm4 = document.querySelector('text'); // SVG text

console.log( elm1, ' has class "a": ', elm1.hasClass('a') );
console.log( elm1, ' has class "b": ', elm1.hasClass('b') );
console.log( elm1, ' has class "c": ', elm1.hasClass('c') );
console.log( elm1, ' has class "d": ', elm1.hasClass('d') );
console.log( elm1, ' has class "a c": ', elm1.hasClass('a c') );
console.log( elm1, ' has class "a d": ', elm1.hasClass('a d') );
console.log( elm1, ' has class "": ', elm1.hasClass('') );

console.log( elm2, ' has class "a": ', elm2.hasClass('a') );

// console.log( elm3, ' has class "a": ', elm3.hasClass('a') );

console.log( elm4, ' has class "a": ', elm4.hasClass('a') );

<p class='a b c'>This is a <b>test</b> string</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
    <text x="10" y="20" class='a'>SVG Text Example</text>
</svg>

Testseite

1. Felix 'Trick, Leerzeichen hinzuzufügen, um den Klassennamen und die gesuchte Zeichenfolge zu flankieren, ist der richtige Ansatz, um festzustellen, ob die Elemente die Klasse haben oder nicht.

2. Um je nach Klasse ein unterschiedliches Verhalten zu erzielen, können Sie Funktionsreferenzen oder Funktionen in einer Karte verwenden:

   function fn1(element){ /* code for element with class1 */ }
   
   function fn2(element){ /* code for element with class2 */ }
   
   function fn2(element){ /* code for element with class3 */ }
   
   var fns={'class1': fn1, 'class2': fn2, 'class3': fn3};
   
   for(var i in fns) {
       if(hasClass(test, i)) {
           fns[i](test);
       }
   }

   • for (var i in fns) durchläuft die Schlüssel in der fns-Map.
   • Wenn nach fnsi keine Unterbrechung vorliegt, kann der Code immer dann ausgeführt werden, wenn eine Übereinstimmung vorliegt. Wenn also das Element fi, class1 und class2 enthält, werden sowohl fn1 als auch fn2 ausgeführt.
   • Der Vorteil dieses Ansatzes besteht darin, dass der für jede Klasse auszuführende Code wie der in der switch-Anweisung beliebig ist. In Ihrem Beispiel haben alle Fälle einen ähnlichen Vorgang ausgeführt, aber morgen müssen Sie möglicherweise für jeden Fall unterschiedliche Schritte ausführen.
   • Sie können den Standardfall simulieren, indem Sie eine Statusvariable angeben, ob in der Schleife eine Übereinstimmung gefunden wurde oder nicht.

Ich würde Poly die classList-Funktionalität füllen und die neue Syntax verwenden. Auf diese Weise verwendet ein neuerer Browser die neue Implementierung (die viel schneller ist) und nur alte Browser nehmen den Leistungseinbruch aus dem Code.

https://github.com/remy/polyfills/blob/master/classList.js

Dies ist ein bisschen anders, aber wenn Sie ein Ereignis haben, das den Wechsel auslöst, können Sie auf Klassen verzichten:

<div id="classOne1"></div>
<div id="classOne2"></div>
<div id="classTwo3"></div>

Du kannst tun

$('body').click( function() {

    switch ( this.id.replace(/[0-9]/g, '') ) {
        case 'classOne': this.innerHTML = "I have classOne"; break;
        case 'classTwo': this.innerHTML = "I have classTwo"; break;
        default: this.innerHTML = "";
    }

});

.replace(/[0-9]/g, '') entfernt Ziffern von id .

Es ist ein bisschen hackig, funktioniert aber für lange Schalter ohne zusätzliche Funktionen oder Schleifen

Unter diesem Codepen-Link können Sie ein Element schneller und einfacher überprüfen, wenn es eine bestimmte Klasse hat. Verwenden Sie dazu Vanille-JavaScript ~!

hasClass (Vanilla JS)

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

Dies wird auf IE8 + unterstützt.

Zuerst prüfen wir, ob classListdies der Fall ist, und können die containsvon IE10 + unterstützte Methode verwenden. Wenn wir mit IE9 oder 8 arbeiten, wird auf einen regulären Ausdruck zurückgegriffen, der nicht so effizient ist, aber eine prägnante Polyfüllung darstellt.

if (el.classList) {
  el.classList.contains(className);
} else {
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}

Wenn Sie mit babel kompilieren, können Sie alternativ einfach Folgendes verwenden: el.classList.contains(className);

Probier diese:

document.getElementsByClassName = function(cl) {
   var retnode = [];
   var myclass = new RegExp('\\b'+cl+'\\b');
   var elem = this.getElementsByTagName('*');
   for (var i = 0; i < elem.length; i++) {
       var classes = elem[i].className;
       if (myclass.test(classes)) retnode.push(elem[i]);
   }
    return retnode;
};

Ich denke, dass die perfekte Lösung dies sein wird

if ($(this).hasClass("your_Class")) 
    alert("positive");            
else              
    alert("Negative");

In welchem ​​Element befindet sich derzeit die Klasse '.bar'? Hier ist eine andere Lösung, aber es liegt an Ihnen.

var reg = /Image/g, // regexp for an image element
query = document.querySelector('.bar'); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string

if (query.match(reg)) { // checks if it matches
  alert('the class .bar is attached to the following Element:\n' + query);
}

jsfiddle Demo

Natürlich ist dies nur eine Suche nach 1 einfachen Element <img>( /Image/g), aber Sie können alles in ein Array wie <li>is /LI/g, <ul>= /UL/gusw. einfügen .

Nur um die Antwort für Personen zu ergänzen, die versuchen, Klassennamen in Inline-SVG-Elementen zu finden.

Ändern Sie die hasCLass()Funktion in:

function hasClass(element, cls) {
    return (' ' + element.getAttribute('class') + ' ').indexOf(' ' + cls + ' ') > -1;
  }

Anstatt die classNameEigenschaft zu verwenden, müssen Sie die getAttribute()Methode verwenden, um den Klassennamen abzurufen.

Ich habe diese Funktionen für meine Website erstellt, ich verwende nur Vanille-Javascript, vielleicht hilft es jemandem. Zuerst habe ich eine Funktion erstellt, um ein beliebiges HTML-Element abzurufen:

//return an HTML element by ID, class or tag name
    var getElement = function(selector) {
        var elements = [];
        if(selector[0] == '#') {
            elements.push(document.getElementById(selector.substring(1, selector.length)));
        } else if(selector[0] == '.') {
            elements = document.getElementsByClassName(selector.substring(1, selector.length));
        } else {
            elements = document.getElementsByTagName(selector);
        }
        return elements;
    }

Dann die Funktion, die die zu entfernende Klasse erhält, und die Auswahl des Elements:

var hasClass = function(selector, _class) {
        var elements = getElement(selector);
        var contains = false;
        for (let index = 0; index < elements.length; index++) {
            const curElement = elements[index];
            if(curElement.classList.contains(_class)) {
                contains = true;
                break;
            }
        }
        return contains;
    }

Jetzt können Sie es so verwenden:

hasClass('body', 'gray')
hasClass('#like', 'green')
hasClass('.button', 'active')

Hoffe es wird helfen.

Tipp: Versuchen Sie, Abhängigkeiten von jQuery in Ihren Projekten so weit wie möglich zu entfernen - VanillaJS .

document.firstElementChildGibt das <html>Tag zurück, dann gibt das classListAttribut alle hinzugefügten Klassen zurück.

if(document.firstElementChild.classList.contains("your-class")){
    // <html> has 'your-class'
} else {
    // <html> doesn't have 'your-class'
}

Für mich ist der eleganteste und schnellste Weg, dies zu erreichen:

function hasClass(el,cl){
   return !!el.className && !!el.className.match(new RegExp('\\b('+cl+')\\b'));
}