检查是否存在没有jQuery的CSS类

Question

使用vanilla javascript或原型可以有人告诉我如何运行检查以查看是否存在类？ 例如，我正在使用以下代码添加一个名为hideIt的类：

var overlay = document.getElementById("overlay_modal");
overlay.className += " hideIt";

我还需要一个脚本，以后可以检查hideIt是否存在。 我尝试过这样的事情：

if (overlay.className == "hideIt")

但那并不好。 有任何想法吗？

Answer 1

使用正则表达式 。 \\b将匹配单词边界（空格，换行符，标点符号或字符串结尾）。

var overlay = document.getElementById("overlay_modal");
if (overlay.className.match(/\bhideIt\b/)) 
{
    // frob a widget
}

Answer 2

您可以使用getElementsByClassName() ，虽然并非所有浏览器都支持（不在IE <9中）：

if (!document.getElementsByClassName('classname').length){
    // class name does not exist in the document
}

else {
    // class exists in the document
}

根据浏览器兼容性要求，您可以使用querySelectorAll() ：

if (document.querySelectorAll('#overlay_modal.hideIt')) {
    // the element with id of overlay_modal exists and has the class-name 'hideIt'
}

参考文献：

• Quirksmode上querySelectorAll兼容性 。
• Mozilla Developer Network上的querySelectorAll() 。
• Mozilla Developer Network的getElementsByClassName() 。
• Quirksmode上getElementsByClassName（）的兼容性 。

Answer 3

var id = document.getElementById("id");
var classes = id.className.split(" ");
if(classes.indexOf("class_name") == -1)
{
}

Answer 4

因为这里问的问题也是原型方式 ，

if (overlay.hasClassName('hideIt'))