Powiedz, że mam ten element HTML

<div id="hello" class="hello option john">Hello</div>
<div id="hello" class="hello john">Hello</div>

. Teraz wybieram element z JavaScript według tego ID. Jak zrobiłbym odpowiednik if($('hello').hasClass('option')){//do stuff} (jQuery) z wyjątkiem zwykłego javascript?

7
chromedude 27 październik 2011, 00:17

3 odpowiedzi

Najlepsza odpowiedź
if(document.getElementById("hello").className.split(" ").indexOf("option") > -1);

To to zrobi.

Edytuj: Demo

Lub jako funkcja prototypowa:

HTMLElement.prototype.hasClass = function(c){
    return this.className.split(" ").indexOf(c) > -1
}

I

document.getElementById("hello").hasClass("option")

Aktualizacja 2015:

W nowoczesnych przeglądarkach, w tym tj. 10 możesz napisać:

document.getElementById("hello").classList.contains("option")

Zobacz referencje: https://developer.mozilla.org/en -U / DOCS / WWW / API / Element / Lista klasy

Jest wspierany we wszystkich głównych przeglądarkach (ref: http://caniuse.com/#search=classlist)

16
AlexStack 23 luty 2015, 11:51

Jeśli cele są nowoczesnymi przeglądarkami, możesz użyć Queryselector (). W przeciwnym razie możesz grać z nazwa klasy . ;)

0
KorHosik 26 październik 2011, 20:21

Jest w jakiś sposób proste:

var elHasClass = function(element, classToTest) {
    var pattern = new RegExp("(^| )" + classToTest + "( |$)");
    return pattern.test(element.className) ? true : false;
};

Teraz możesz:

if( elHasClass(myEl, 'someCssClass') ) { ... do you stuff here ... }
0
VoidMain 26 październik 2011, 20:23