測試一個類

現代瀏覽器提供了一個 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]');