检查以查明元素是否包含 1 个以上的类名

Checking to find out if an element contains more than 1 classname

本文关键字：包含 元素 是否 检查      更新时间：2023-09-26

我需要你的帮助。

使用纯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">

你的问题（或者更确切地说是你的标题）有点不清楚。我猜你问的不是元素是否有多个类，而是元素是否分配了 2 个特定的类（ClassA 和 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);
}
<div id="test" class="ClassA ClassB"></div>

你可以只使用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">

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

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

试试这个，这里有一个例子 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) 
}

纯 JavaScript： 

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

在上面的代码中，您希望遍历拆分方法的结果，并在获取数组长度之前删除空数组条目。

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

首先，获取 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);
}
相关文章：