你怎么知道HTML元素是否有一个普通的Javascript类？

Question

说我有这个html元素

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

。现在我通过它的Id选择带有javascript的元素。除了简单的Javascript之外，我如何做同等的if($('hello').hasClass('option')){//do stuff}（jQuery）？

Answer 1

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

那就行了。

编辑：demo

或作为原型函数：

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

和

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

2015年更新：

在包括IE 10在内的现代浏览器中，您可以编写：

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

参见参考：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

所有主流浏览器都支持它（参考：http://caniuse.com/#search=classlist）

Answer 2

如果您的目标是现代浏览器，则可以使用querySelector()。 否则，您可以使用 className 属性。 ;）

Answer 3

有点简单：

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

现在你可以做到：

if( elHasClass(myEl, 'someCssClass') ) { ... do you stuff here ... }