小编典典

检查元素是否包含JavaScript中的类?

javascript

使用普通的JavaScript(不是jQuery),是否可以检查元素是否 包含 类?

目前,我正在这样做:

var test = document.getElementById("test");

var testClass = test.className;



switch (testClass) {

  case "class1":

    test.innerHTML = "I have class1";

    break;

  case "class2":

    test.innerHTML = "I have class2";

    break;

  case "class3":

    test.innerHTML = "I have class3";

    break;

  case "class4":

    test.innerHTML = "I have class4";

    break;

  default:

    test.innerHTML = "";

}


<div id="test" class="class1"></div>

问题是,如果我将HTML更改为此…

<div id="test" class="class1 class5"></div>

…不再存在完全匹配的内容,因此我得到的默认输出为none("")。但我还是想输出为I have class1,因为<div>包含
.class1类。


阅读 246

收藏
2020-04-25

共1个答案

小编典典

使用方法:element.classList .contains

element.classList.contains(class);

这适用于所有当前浏览器,并且也有polyfill支持旧版本的浏览器。


或者
,如果您使用较旧的浏览器,并且不想使用polyfill对其进行修复,则使用indexOf正确,但是您需要对其进行一些调整:

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

否则,true如果您正在寻找的班级是另一个班级名称的一部分,您也将获得。

演示

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

它也较少冗余;)

2020-04-25