it-swarm.com.de

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

Gibt es eine Möglichkeit, mithilfe von einfachem JavaScript (nicht jQuery) 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 zu diesem ändere ...

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

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

463
daGUY

Verwenden Sie die Methode element.classList _.contains_:

_element.classList.contains(class);
_

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


Wenn Sie alternativ mit älteren Browsern arbeiten und keine Polyfills verwenden möchten, um diese zu reparieren, ist die Verwendung von indexOf richtig. aber du musst es ein wenig optimieren:

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

Andernfalls erhalten Sie auch true, wenn 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;)

796
Felix Kling

Die einfache und effektive Lösung ist die Methode . Enthält.

test.classList.contains(testClass);
84
developer

In modernen Browsern können Sie einfach die contains -Methode von 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

enter image description here

(von CanIUse.com )


Polyfill

Wenn Sie Element.classList verwenden möchten, aber auch ältere Browser unterstützen möchten, ziehen Sie in Betracht Verwenden dieser Polyfüllung durch Eli Gray .

40
John Slegers

Da er switch () verwenden möchte, wundert es mich, dass noch niemand dies erwähnt 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/>";
    }
}
9
Thought

Hier ist ein kleiner Ausschnitt, wenn Sie überprüfen möchten, 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);
}

Dies trägt der Tatsache Rechnung, 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 wie folgt auslösen (sehr ähnlich der .hasClass() -Funktion von jQuery):

document.getElementById('MyDiv').hasClass('active');
6
Keval Bhatt

Dies 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;
    }
}
5
Dementic

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 von IE (natürlich) nicht unterstützt. Dafür gibt es viele Affen-Patches im Netz.

5
KooiInc

Ich kenne dort 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');
}
4
TheBlackBenzKid

Element.matches ()

element.matches (selectorString)

Gemäß MDN Web Docs :

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

Daher können Sie mit Element.matches() ermitteln, 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

3
Grant Miller

className ist nur eine Zeichenfolge. Mit der regulären Funktion indexOf können Sie feststellen, ob die Klassenliste eine andere Zeichenfolge enthält.

3
David

Hier ist eine einfache 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;
}
2

Ich habe eine Prototypmethode erstellt, bei der classList verwendet wird, andernfalls wird indexOf verwendet:

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

2
vsync

Über diesen Codepen-Link können Sie mit Vanilla JavaScript ~!

hasClass (Vanilla JS)

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

Dies ist ein bisschen abwegig, aber wenn Sie ein Ereignis haben, das einen 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 aus id.

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

1
Arthur Tarasov

Ich denke, diese perfekte Lösung wird dies sein

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

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

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

}
1
Brandon Brule
  1. Felix 'Trick, Leerzeichen an der Seite des Klassennamens und des gesuchten Strings einzufügen, ist der richtige Ansatz, um zu bestimmen, ob die Elemente die Klasse haben oder nicht.

  2. Um je nach Klasse ein anderes Verhalten zu erzielen, können Sie Funktionsreferenzen oder Funktionen in einer Map 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 Tasten in der fns-Map.
    • Wenn nach fnsi keine Unterbrechung erfolgt, kann der Code bei jeder Übereinstimmung ausgeführt werden. Wenn das Element also f.i. class1 und class2 hat, werden sowohl fn1 als auch fn2 ausgeführt.
    • Der Vorteil dieses Ansatzes besteht darin, dass der auszuführende Code für jede Klasse willkürlich ist, wie der in der switch-Anweisung. In Ihrem Beispiel haben alle Fälle eine ähnliche Operation ausgeführt, aber möglicherweise müssen Sie morgen für jeden Vorgang andere Aktionen ausführen.
    • Sie können den Standardfall simulieren, indem Sie eine Statusvariable angeben lassen, ob eine Übereinstimmung in der Schleife gefunden wurde oder nicht.
1
entonio

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 übernehmen den Leistungseinbruch aus dem Code.

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

1
Eric Young

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

in welchem ​​Element befindet sich aktuell 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

Dies ist natürlich nur eine Suche nach einem einfachen Element <img> (/Image/g), aber Sie können alle in ein Array wie <li> setzen, ist /LI/g, <ul> = /UL/g usw.

0
Thielicious

Dies wird in IE8 + unterstützt.

Zuerst prüfen wir, ob classList vorhanden ist, wenn dies der Fall ist. Wir können die contains -Methode verwenden, die von IE10 + unterstützt wird. Wenn wir uns im IE9 oder 8 befinden, wird auf die Verwendung eines regulären Ausdrucks 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);
0
Buts

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

Ändern Sie die Funktion hasCLass() in:

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

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

0
Ben Rudolph