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

The problem

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

Example
// element's 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){ ... }  

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

just pure javascript please

 nandu09 июн. 2012 г., 13:27
Вы можете использовать некоторое регулярное выражение для полного имени класса. Для регулярного выражения вы можете обратиться к этомуstackoverflow.com/questions/2232934/…
 Felix Kling09 июн. 2012 г., 13:35
возможный дубликатTest if an element contains a class? - пожалуйста, воспользуйтесь поиском, прежде чем задать новый вопрос.

Ответы на вопрос(6)

& Quot; символ, затем проверьте индекс класса, который вы хотите найти.

function hasClass(element, clazz) {
    return element.className.split(" ").indexOf(clazz) > -1;
}
 09 июн. 2012 г., 13:37
Хотя не работает из коробки в IE8 и ниже (indexOf не поддерживается для массивов).
 09 июн. 2012 г., 13:40
Хорошо, спасибо за эту информацию :)

const hasClass = (el, className) => el.classList.contains(className);

Как пользоваться

hasClass(document.querySelector('div.active'), 'active'); // true
Решение Вопроса
function hasClass( elem, klass ) {
     return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
}
 09 июн. 2012 г., 13:26
Вот как JQueryhasClass работает за кадром.
 04 мар. 2013 г., 19:06
Я уверен, что версия jQuery нормализует пробелы в.className значение в первую очередь. Это может не получиться, если для разделения классов используется символ табуляции или другой пробел.
 Adam09 июн. 2012 г., 13:28
классная идея! и это очень коротко!

ClassList:

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

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

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

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 и искать классы, определенные в качестве параметра в основной функции. Затем он будет проверять каждый основанный элемент класса с помощью шаблона регулярного выражения. Если он найдется, он будет толкать массив и выводить результаты.

    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 на объект (ы), и в некотором смысле это делает код более сложным, чем требуется, но это должно иметь смысл, не зная деталей этого.

 09 июн. 2012 г., 13:43
В своем комментарии я довольно четко отмечаю, что да, это исходит от jQuery. Вы подняли хороший вопрос о классе, я не заметил, я обновлю ответ
 09 июн. 2012 г., 13:29
Вы случайно не скопировали это из jQuery? что значитthis Ссылаться на? гдеrclass определены?

Ваш ответ на вопрос