Question

我需要你的帮助。

使用纯javascript而非jQuery，如何确定元素是否包含多于1个类名。

即

if (#test has the classname = "classA and classB" then { alert(true) }
else { alert(false) }

HTML：

<input type="text" id="test" "class="classA classB">

Answer 1

<input type="text" id="test" class="classA classB" />

var classArray = document.getElementById('test').classList;

Answer 2

您只能使用split：

var classes = document.getElementById("test").className.split(' ');

请检查以下内容：

var classes = document.getElementById("test").className.split(' ');

alert(classes);

<input type="text" id="test" class="classA classB">

Answer 3

你的问题（或者说你的头衔）有点不清楚。我猜你的问题是，如果一个元素有多个类，但是一个元素是否有2个特定的类分配给它（ClassA和{{1} }）：

ClassB

var classNames = document.getElementById("test").className.split(" ");

if (classNames.indexOf("ClassA") >= 0 && classNames.indexOf("ClassB") >= 0) {
  // test has both class A and class B
  alert(true);
} else {
  alert(false);
}

Answer 4

纯JavaScript：

// Consecutive spaces in the class attribute will cause this to return the wrong number
document.getElementById("test").className.split(" ").length

在上面的代码中，您需要循环遍历split方法的结果，并在获取数组长度之前删除空数组条目。

DOM API （http://caniuse.com/#feat=classlist）

document.querySelector("#test").classList.length
or
document.getElementById("test").classList.length

对于伪代码

var classList = document.querySelector("#test").classList;
if (classList.contains("classA") && classList.contains("classB")) {
    alert(true);
} else {
    alert(false);
}

Answer 5

试试这个，这里有一个例子fiddlejs

Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] == obj) {
            return true;
        }
    }
    return false;
} 

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

if (test.contains("classA") && test.contains("classC")){
    alert(true) 
}
else { 
   alert(false) 
}

Answer 6

首先，获取class属性：

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

将其拆分为数组：

var classes = classAttr.split(" +");

最后，检查两个类是否都在数组中。使用ECMAScript 7：

if (classes.includes("classA") && classes.includes("classB") {
  alert(true);
} else {
  alert(false);
}

或者使用较旧的JS：

if ((classes.indexOf("classA") > -1) && (classes.indexOf("classB") > -1)) {
  alert(true);
} else {
  alert(false);
}

检查以确定元素是否包含多于1个类名

6 个答案: