Prüfen, ob ein Element eine Klasse in JavaScript enthält?

Question

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

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 so ändere...

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

...gibt es keine exakte Übereinstimmung mehr, so dass ich die Standardausgabe von nichts erhalte ( "" ). Aber ich möchte trotzdem, dass die Ausgabe so aussieht I have class1 weil die <div> toujours enthält die .class1 Klasse.

Answer 1

Da er switch() verwenden will, bin ich überrascht, dass dies noch niemand vorgebracht 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/>";
    }
}

Answer 2

Hier ist ein kleines Snippet, wenn Sie versuchen, zu überprüfen, ob ein Element eine Klasse enthält, ohne jQuery zu verwenden.

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

Damit wird der Tatsache Rechnung getragen, dass ein Element mehrere durch Leerzeichen getrennte Klassennamen enthalten kann.

OR

---

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 wie jQuery's .hasClass() Funktion):

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

Answer 3

Ein vereinfachter Oneliner: 1

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

1 indexOf für Arrays wird vom IE (natürlich) nicht unterstützt. Es gibt eine Menge von Affen Patches auf dem Netz für das gefunden werden.

Answer 4

Dieser Artikel ist schon etwas älter, 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;
    }
}

Answer 5

className ist nur eine Zeichenkette, so dass Sie die reguläre indexOf um festzustellen, ob die Liste der Klassen eine andere Zeichenkette enthält.