className只是一个字符串，所以您可以使用常规的indexOf函数来查看类列表是否包含另一个字符串。

使用元素。contains方法:

element.classList.contains(class);

这适用于所有当前的浏览器，也有支持旧浏览器的腻子。

Alternatively, if you work with older browsers and don't want to use polyfills to fix them, using indexOf is correct, but you have to tweak it a little:

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

否则，如果您正在寻找的类是另一个类名的一部分，也会得到true。

DEMO

jQuery使用类似的(如果不是相同的)方法。

应用于本例:

因为这不能和switch语句一起工作，你可以用下面的代码达到同样的效果:

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

它也更少冗余;)

试试这个:

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

下面是一个不区分大小写的简单解决方案:

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

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

IE当然不支持数组的1 indexOf。网上有很多猴子补丁。

Felix's trick of adding spaces to flank the className and the string you're searching for is the right approach to determining whether the elements has the class or not. To have different behaviour according to the class, you may use function references, or functions, within a map: 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. Having no break after fnsi allows the code to be executed whenever there is a match - so that if the element has, f.i., class1 and class2, both fn1 and fn2 will be executed. The advantage of this approach is that the code to execute for each class is arbitrary, like the one in the switch statement; in your example all the cases performed a similar operation, but tomorrow you may need to do different things for each. You may simulate the default case by having a status variable telling whether a match was found in the loop or not.

因为他想使用switch()，我很惊讶没有人提出这个:

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

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

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

我认为完美的解是这个

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

我将保利填充classList功能，并使用新的语法。这样，新的浏览器将使用新的实现(速度快得多)，只有旧的浏览器会受到代码的性能影响。

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

我已经创建了一个使用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>

测试页面

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

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

}

这里有一个小片段，如果你试图检查元素是否包含一个类，而不使用jQuery。

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

这说明元素可能包含多个用空格分隔的类名。

OR

您还可以将此函数分配给元素原型。

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

并像这样触发它(非常类似于jQuery的.hasClass()函数):

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

简单而有效的解决方法是尝试。包含方法。

test.classList.contains(testClass);

我知道有很多答案，但其中大多数是额外的函数和额外的类。这是我个人使用的;更干净，代码行更少!

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

在现代浏览器中，您可以只使用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。

在哪个元素中当前是类的。酒吧”?这里有另一个解决方案，但取决于你。

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

jsfiddle演示

当然，这只是查找一个简单的元素<img>(/Image/g)，但您可以将所有元素放在一个数组中，如<li> is / li /g， <ul> = / ul /g等。

这有点过分，但是如果你有一个触发switch的事件，你可以不使用类:

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

你可以这样做

$('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， ")删除id中的数字。

这有点俗气，但适用于没有额外函数或循环的长开关

查看这个Codepen链接，可以更快更简单地使用JavaScript检查元素是否具有特定的类~!

hasClass （Vanilla JS）

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

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

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(名称);

只是为那些试图在内联SVG元素中查找类名的人添加答案。

将hasCLass()函数更改为:

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

您需要使用getAttribute()方法来获取类名，而不是使用className属性。

Element.matches ()

元素匹配(selectorString)。

根据MDN Web Docs:

如果元素将被指定的选择器字符串选中，则element .matches()方法返回true;否则，返回false。

因此，您可以使用element .matches()来确定元素是否包含类。

const element = document.querySelector('#example'); console.log (element.matches (' . foo '));/ /正确的 <div id="example" class="foo bar"></div>

查看浏览器兼容性

我为我的网站创建了这些函数，我只使用香草javascript，也许它会帮助到一些人。 首先，我创建了一个函数来获取任何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;
    }

然后是接收要移除的类的函数和元素的选择器:

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

现在你可以这样使用它:

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

希望能有所帮助。

提示:试着在你的项目中尽可能多地删除jQuery依赖项- VanillaJS。

文档。firstElementChild返回<html>标签，然后classList属性返回添加到它的所有类。

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

因为.className是一个字符串，你可以使用string includes()方法来检查你的.className是否包含你的类名:

element.className.includes("class1")

使用classList也是理想的

HTML

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

JavaScript

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

element.classList.contains("myClass");

要检查元素是否包含类，可以使用元素classList属性的contains()方法:*

element.classList.contains(className);

*假设你有以下元素:

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

要检查元素是否包含二级类，可以使用以下代码:

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

下面返回false，因为元素没有类错误:

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

正如公认的答案所示，元素。className返回一个字符串，所以你可以通过使用indexOf()方法轻松检查类是否存在:

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

如果你对indexOf和classList之间的性能差异感兴趣。contains，使用indexOf似乎稍微快一些。我做了一个快速的基准性能测试来验证这一点。以下是我的发现:indexOf vs ClassList.contains。

这个问题可以通过element.classList.contains()得到很好的回答，但人们的回答过于夸张，并提出了一些大胆的要求，因此我运行了一个基准测试。

记住，每个测试都要进行1000次迭代，所以大多数测试仍然非常快。除非在特定操作中广泛依赖于此，否则不会看到性能差异。

我用各种方法做了一些测试。在我的机器上，(Win 10, 24gb, i7-8700)， classList。Contains表现非常好。className也是。Split(' ')，实际上是相同的。

胜出者是classList.contains()。如果你没有检查classList是否未定义，~(' ' + v.className + ' ')。indexOf(' ' + classToFind + ' ')爬行5-15%