测试一个类

现代浏览器提供了一个 classList 对象，以便于操作元素的 class 属性。较旧的浏览器需要直接操作元素的 className 属性。

*注意类名不以任何特定顺序存储在元素的属性中

W3C DOM < 4

测试元素是否包含类需要对 className 属性进行一些操作。此示例使用数组方法来测试类。

function hasClass(el, name) {
  var classes = (el && el.className || "").split(/\s+/);
  return classes.indexOf(name) > -1;
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

测试多个类名称需要循环。

function hasClass(el, name) {
  name = name.split(/[\s.]+/);
  var hasClass = true,
    classes = (el && el.className || "").split(/\s+/),
    index = name.length;
  while (index--) {
    hasClass = hasClass && classes.indexOf(name[index]) > -1;
  }
  return hasClass;
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

你也可以考虑使用正则表达式，而不是使用 .indexOf()。

function hasClass(el, name) {
  return new RegExp("\\b" + name+ "\\b").test(el.className);
}
var el = document.getElementById("link1");
console.log(hasClass(el, "foo"));

W3C DOM >= 4

单个类名称的测试完成如下：

var hasClass = document.querySelector("#link1").classList.contains("foo");

对于多个类名，使用 matches 更容易。注意使用类选择器; 选择器可以是任何有效的字符串选择器（id，attribute，伪类等）。

var hasClass = document.querySelector("#link1").matches('.foo.bar');
var hasClass = document.querySelector("#link2").matches('a.bar[href]');