如果元素只有一个类名，可以通过获取class属性快速检查。其他答案要健壮得多，但这个肯定有它的用例。

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

}

这有点过时了，但也许有人会发现我的解决方案很有帮助:

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

对我来说，最优雅、最快速的实现方法是:

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

IE8+支持。

首先，我们检查classList是否存在，如果存在，我们可以使用IE10+支持的contains方法。如果我们是在IE9或ie8上，它就会退回到使用正则表达式，它没有那么高效，但是一个简洁的填充。

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

或者，如果你正在使用babel编译，你可以简单地使用: el.classList.contains(名称);

在现代浏览器中，您可以只使用Element的contains方法。班级名册:

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'), 'main main-content' : testElement.classList.contains('main main-content') }); <div id="test" class="main main-content content"></div>

支持的浏览器

(来自CanIUse.com)

Polyfill

如果你想使用Element。classList，但你也想支持旧的浏览器，考虑使用这个polyfill由Eli Grey。

我已经创建了一个使用classList的原型方法，如果可能，否则诉诸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>

测试页面