Sprawdź, czy element zawiera klasę w JavaScript?

Użyj metody element.classList .contains:

element.classList.contains(class);

Działa to we wszystkich obecnych przeglądarkach, a istnieją także wypełnienia obsługujące starsze przeglądarki.

Alternatywnie, jeśli pracujesz ze starszymi przeglądarkami i nie chcesz używać wypełniaczy do ich naprawiania, użyj indexOf jest poprawny, ale musisz go trochę poprawić:

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

W przeciwnym razie otrzymasz również true, jeśli klasa, której szukasz, jest częścią innej nazwy klasy.

DEMO

jQuery używa podobnej (jeśli nie tej samej) metody.

W przykładzie:

Ponieważ nie działa to razem z instrukcją switch, ten sam efekt można osiągnąć za pomocą tego kodu:

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

Jest też mniej zbędny ;)

Łatwym i skutecznym rozwiązaniem jest wypróbowanie metody .contains.

test.classList.contains(testClass);

W nowoczesnych przeglądarkach możesz po prostu użyć metody contains z Element.classList :

testElement.classList.contains(className)

Próbny

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>

Obsługiwane przeglądarki

(z CanIUse.com)

Polifill

Jeśli chcesz używać Element.classList, ale chcesz także obsługiwać starsze przeglądarki, rozważ użycie tego wypełnienia autorstwa Eli Grey.

Element.dopasowuje()

element.matches(selectorString)

Według dokumentów internetowych MDN:

Metoda Element.matches() zwraca true jeśli element miałby zostać wybrany przez podany ciąg selektora; w przeciwnym razie zwraca false.

Dlatego możesz użyć Element.matches(), aby określić, czy element zawiera klasę.

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

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

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

Wyświetl zgodność przeglądarki

Ponieważ chce użyć funkcji switch(), dziwię się, że nikt jeszcze tego nie przedstawił:

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

Oto mały fragment, jeśli próbujesz sprawdzić, czy element zawiera klasę, bez użycia jQuery.

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

To wyjaśnia fakt, że element może zawierać wiele nazw klas oddzielonych spacją.

LUB

Możesz także przypisać tę funkcję do prototypu elementu.

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

And trigger it like this (very similar to jQuery’s .hasClass() function):

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

To jest trochę stare, ale może komuś przyda się moje rozwiązanie:

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

className to tylko ciąg znaków, więc możesz użyć zwykłej funkcji indexOf, aby sprawdzić, czy lista klas zawiera inny ciąg.

Uproszczony oneliner:¹

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

¹ indexOf dla tablic nie jest obsługiwany przez IE (oczywiście). W sieci można znaleźć wiele łatek małp, które służą temu celowi.

Wiem, że jest wiele odpowiedzi, ale większość z nich dotyczy dodatkowych funkcji i dodatkowych klas. To jest ten, którego osobiście używam; znacznie czystsze i znacznie mniej linii kodu!

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

Stworzyłem prototypową metodę, która używa classList, jeśli to możliwe, w przeciwnym razie ucieka się do 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>

Strona testowa

Oto trywialne rozwiązanie nieuwzględniające wielkości liter:

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

1. Sztuczka Felixa polegająca na dodawaniu spacji po obu stronach nazwy klasy i szukanego ciągu znaków jest właściwym podejściem do określenia, czy elementy mają daną klasę, czy nie.

2. Aby zachować się inaczej w zależności od klasy, możesz użyć odwołań do funkcji lub funkcji na mapie:

   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) iterates through the keys within the fns map.
   • Brak przerwy po fnsi umożliwia wykonanie kodu za każdym razem, gdy wystąpi dopasowanie - więc jeśli element ma f.i, klasę 1 i klasę 2, zostaną wykonane zarówno fn1, jak i fn2.
   • Zaletą tego podejścia jest to, że kod do wykonania dla każdej klasy jest dowolny, podobnie jak ten w instrukcji switch; w twoim przykładzie wszystkie przypadki wykonały podobną operację, ale jutro może być konieczne wykonanie innych czynności dla każdego z nich.
   • Możesz symulować przypadek domyślny, mając zmienną stanu informującą, czy w pętli znaleziono dopasowanie, czy nie.

Jeśli element ma tylko jedną nazwę klasy, możesz to szybko sprawdzić, pobierając atrybut class. Inne odpowiedzi są znacznie solidniejsze, ale z pewnością ma to swoje przypadki użycia.

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

}

Jest to obsługiwane w IE8+.

Najpierw sprawdzamy, czy classList istnieje. Jeśli tak, możemy użyć metody contains obsługiwanej przez IE10+. Jeśli korzystamy z IE9 lub 8, wracamy do używania wyrażenia regularnego, które nie jest tak wydajne, ale jest zwięzłym wypełnieniem.

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

Alternatywnie, jeśli kompilujesz za pomocą Babel, możesz po prostu użyć: el.classList.contains(className);

Aby sprawdzić, czy element zawiera klasę, użyj metody zawiera() właściwości classList elementu:*

element.classList.contains(className);

*Załóżmy, że masz następujący element:

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

Aby sprawdzić, czy element zawiera klasę dodatkową, użyj następującego kodu:

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

Poniższe zwraca wartość false, ponieważ element nie zawiera błędu klasy:

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

Myślę, że idealnym rozwiązaniem będzie to

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

Chciałbym, aby Poly wypełnił funkcjonalność classList i użył nowej składni. W ten sposób nowsza przeglądarka będzie korzystać z nowej implementacji (która jest znacznie szybsza) i tylko starsze przeglądarki przejmą spadek wydajności z kodu.

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

To trochę nie tak, ale jeśli masz zdarzenie, które uruchamia przełącznik, możesz obejść się bez klas:

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

Możesz to zrobić

$('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, '') usuwa cyfry z id.

Jest to trochę hacky, ale działa w przypadku długich przełączników bez dodatkowych funkcji i pętli

Zobacz ten link do Codepen, aby szybciej i łatwo sprawdzić element, czy ma on określoną klasę, używając waniliowego JavaScript~!

hasClass (Vanilla JS)

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

Korzystanie z listy klas jest również idealne

HTML

<div id="box" class="myClass"></div>

JavaScript

const element = document.querySelector("#box");

element.classList.contains("myClass");

Jak sugeruje zaakceptowana odpowiedź, Element.className zwraca ciąg znaków, więc możesz łatwo sprawdzić, czy klasa istnieje, używając metody indexOf():

element.className.indexOf('animated') > -1

Jeśli interesuje Cię różnica w wydajności między indexOf a classList.contains, użycie indexOf wydaje się nieco szybsze. Aby to sprawdzić, przeprowadziłem szybki test porównawczy wydajności. Oto moje ustalenia: ClassName.indexOf vs ClassList.contains.

Na to pytanie dość solidnie odpowiedział element.classList.contains(), ale ludzie wykazali się dość ekstrawaganckimi odpowiedziami i wysunęli odważne twierdzenia, więc przeprowadziłem test porównawczy.

Pamiętaj, że każdy test wykonuje 1000 iteracji, więc większość z nich jest nadal bardzo szybka. Jeśli nie będziesz w dużym stopniu na tym polegać w przypadku konkretnej operacji, nie zobaczysz różnicy w wydajności.

Przeprowadziłem kilka testów, w zasadzie na wszystkie sposoby, aby to zrobić. Na moim komputerze (Win 10, 24 GB, i7-8700) plik classList.contains działał znakomicie. To samo dotyczy className.split(' '), która w rzeczywistości jest taka sama.

Zwycięzcą jest jednak classList.contains(). Jeśli nie sprawdzasz, czy lista klas ma wartość undefined, ~(' ' + v.className + ' ').indexOf(' c' + i + ' ') przesuwa się do przodu o 5-15%

Spróbuj tego:

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

w którym elemencie znajduje się obecnie klasa „.bar”? Oto inne rozwiązanie, ale to zależy od Ciebie.

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

Demo jsfiddle

Oczywiście jest to tylko wyszukiwanie 1 prostego elementu <img>(/Image/g), ale możesz umieścić wszystko w tablicy, np. <li> to /LI/g, <ul> = /UL/g itd.

Aby dodać do odpowiedzi dla osób próbujących znaleźć nazwy klas w wbudowanych elementach SVG.

Zmień funkcję hasCLass() na:

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

Zamiast używać właściwości className, będziesz musiał użyć metody getAttribute(), aby pobrać nazwę klasy.

Stworzyłem te funkcje dla mojej witryny, używam tylko waniliowego JavaScript, może komuś to pomoże. Najpierw stworzyłem funkcję pobierającą dowolny element HTML:

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

Następnie funkcja odbierająca klasę do usunięcia i selektor elementu:

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

Teraz możesz go używać w ten sposób:

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

Mam nadzieję, że to pomoże.

Wskazówka: staraj się w miarę możliwości usuwać zależności jQuery ze swoich projektów - VanillaJS.

document.firstElementChild zwraca znacznik <html>, a atrybut classList zwraca wszystkie dodane do niego klasy.

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

Ponieważ .className jest ciągiem znaków, możesz użyć metody ciągu includes(), aby sprawdzić, czy Twój .className zawiera nazwę Twojej klasy:

element.className.includes("class1")

Dla mnie najbardziej eleganckim i najszybszym sposobem na osiągnięcie tego jest:

function hasClass(el, cl) {
        return el.classList ? el.classList.contains(cl) : !!el.className && !!el.className.match(new RegExp('(?: |^)' + cl + '(?: |$)'));
    }