如何使用纯Javascript查找HTML元素是否具有某个类？

Question

假设我有这个HTML元素

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

现在我想通过JavaScript选择一个元素，使用它的Id。如何用纯JavaScript实现相当于if($('hello').hasClass('option')){//do stuff}(jQuery)的功能？

- chromedude

---

https://dev59.com/0G445IYBdhLWcg3wAFm0 - Jere

请参见以下链接：https://dev59.com/0G445IYBdhLWcg3wAFm0 - ipr101

可能是重复的问题：如何测试一个元素是否包含某个类？ - Teepeemm

Answer 1

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

就这样就可以了。

编辑：演示

或者作为一个原型函数：

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/zh-CN/docs/Web/API/Element/classList

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

- Joseph Marikle

---

由于这个问题已经被访问了一千多次，您能否更新它以涵盖原生的 el.classList.contains(className); 解决方案，正如 http://youmightnotneedjquery.com/ 所建议的那样？ - AlexStack

@AlexStack 谢谢，但这仍然是一种可行的解决方案，且仅使用JavaScript。我不想用一种支持度较低的方法（classList 是 IE 10+）。但是，你可以自由地发布另一个答案作为替代解决方案或通过将其添加为替代方法来编辑此答案（在 stackoverflow 的格式上哪种更可取我不太确定）。您应该有足够的权限进行编辑。我相信这种特权在获得 2K rep 后就会解锁。 - Joseph Marikle

Answer 2

看起来很简单：

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

- VoidMain

Answer 3

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

- KorHosik

---

实际上，使用现代浏览器，您将使用.classList。 - Neil