Каков наилучший способ проверить, имеет ли элемент класс?

Проблема

Если элемент имеет несколько классов, он не будет соответствовать проверке регулярного значения свойства, поэтому я ищу лучший способ проверить, имеет ли объект определенный класс в свойстве elementName элемента.

Пример

// element classname is 'hello world helloworld'
var element = document.getElementById('element');

// this obviously fails
if(element.className == 'hello'){ ... }

// this is not good if the className is just 'helloworld' because it will match
if(element.className.indexOf('hello') != -1){ ... }

Итак, что было бы лучшим способом сделать это?

просто чистый javascript пожалуйста

Ответы

Ответ 1

function hasClass( elem, klass ) {
     return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
}

Ответ 2

В современных браузерах вы можете использовать classList:

if (element.classList.contains("hello")) {
   // do something
}

В браузере, который не реализует classList, но предоставляет прототип DOM, вы можете использовать прокладку, показанную в ссылке.

В противном случае вы можете использовать один и тот же код прокладки, чтобы иметь общую функцию без использования прототипа.

Ответ 3

Вы запрашиваете чистый javascript, так как это реализует jQuery:

    hasClass: function( selector ) {
        var className = " " + selector + " ",
            i = 0,
            l = this.length;
        for ( ; i < l; i++ ) {
            if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) {
                return true;
            }
        }
        return false;
    },

rclass является регулярным выражением [\n\t\r], чтобы гарантировать, что альтернативные методы разграничения имен классов не являются проблемой. this будет ссылкой jQuery на объект (объекты), и в некотором смысле он делает код более сложным, чем требуется, но он должен иметь смысл, не зная подробностей его.

Ответ 4

Это должно сработать для вас:

var a = [];
function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];

    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0, j=els.length; i<j; i++)
        if(re.test(els[i].className)) a.push(els[i]);
        return a;
}

getElementsByClassName('wrapper');
for (var i=0; i< a.length; i++) {
    console.log(a[i].className);
}

Этот код будет пересекать DOM и искать классы, определенные как параметр в основной функции. Затем он будет тестировать каждый элемент класса с шаблоном regexp. Если он обнаружит, то нажат на массив и выведет результаты.

Ответ 5

Сначала разделите имя класса с помощью символа "", а затем проверьте индекс класса, который вы хотите найти.

function hasClass(element, clazz) {
    return element.className.split(" ").indexOf(clazz) > -1;
}