如果DOM元素包含类,我如何检入JavaScript？

Question

如果DOM元素包含类,我如何检入JavaScript？

我尝试了以下代码,但由于某种原因它不起作用......

if (document.getElementById('element').class == "class_one") {
    //code...
}

Answer 1

要获取类属性的全部值,请使用 .className

来自MDC:

className获取并设置指定元素的class属性的值.

自2013年以来,您将获得额外的帮助.

很多年前,当这个问题第一次被回答时,它.className是纯JavaScript中唯一真正的解决方案.自2013年起,所有浏览器都支持 .classList界面.

JavaScript的:

if(document.getElementById('element').classList.contains("class_one")) {
    //code...
}

你也可以做有趣的事情有classList,像.toggle(),.add()和.remove().

MDN文档.

向后兼容的代码:

if(document.getElementById('element').className.split(" ").indexOf("class_one") >= 0) {
    //code...
}

Answer 2

你需要的财产className不是class.此外,元素可以有许多类,因此如果要测试它是否具有特定类,则需要执行以下操作:

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

var element = document.getElementById('element');
if ( hasClass(element, "class_one") ) {
    // Do stuff here
}

UPDATE

现代浏览器(除了IE <= 9之外几乎所有主要内容)都支持classList属性,如@ Dropped.on.Caprica的回答中所述.因此,在可用的情况下使用它是有意义的.下面是一些示例代码,用于检测classList浏览器是否支持并返回基于正则表达式的代码:

var hasClass = (typeof document.documentElement.classList == "undefined") ?
    function(el, clss) {
        return el.className && new RegExp("(^|\\s)" +
               clss + "(\\s|$)").test(el.className);
    } :
    function(el, clss) {
        return el.classList.contains(clss);
    };

Answer 3

所有现代浏览器都支持contains以下方法Element.classList：

testElement.classList.contains(className)

演示

testElement.classList.contains(className)

var testElement = document.getElementById('test');

document.body.innerHTML = '<pre>' + JSON.stringify({
    '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')
}, null, 2) + '</pre>';

支持的浏览器

（来自CanIUse.com）

聚合物填料

如果您想使用Element.classList并且还想支持像 IE8 这样的古老浏览器，请考虑使用Eli Gray的这个 polyfill。

Answer 4

这是.className属性,像这样:

if (document.getElementById('element').className == "class_one") {
    //code...
}