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

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

Answer 2

Um zu prüfen, ob ein Element eine Klasse enthält, verwenden Sie die Methode contains() der Eigenschaft classList des Elements: *

element.classList.contains(className);

*Angenommen, Sie haben das folgende Element:

<div class="secondary info">Item</div>*

Um zu prüfen, ob das Element die sekundäre Klasse enthält, verwenden Sie den folgenden Code:

 const div = document.querySelector('div');
 div.classList.contains('secondary'); // true

Im Folgenden wird false zurückgegeben, da das Element den Klassenfehler nicht aufweist:

 const div = document.querySelector('div');
 div.classList.contains('error'); // false

Answer 3

Ich habe eine Prototyp-Methode erstellt, die Folgendes verwendet classList wenn möglich, ansonsten wird auf 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

Answer 4

Ich würde Poly füllen die classList-Funktionalität und verwenden Sie die neue Syntax. Auf diese Weise werden neuere Browser die neue Implementierung verwenden (die viel schneller ist) und nur alte Browser werden die Leistung Hit aus dem Code nehmen.

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

Answer 5

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

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;
}