如何可靠地检查 HTML 元素是否包含 JavaScript 中的特定类？

有没有方法检查 HTML 元素是否包含 JavaScript 中的特定类？

问题：

JavaScript 初学者通常依赖于 className 属性的比较来确定元素是否包含特定的 班级。然而，当元素有多个类并且所需的类不是唯一存在的类时，这种方法就会失败。

解决方案：

为了解决这个问题，JavaScript 提供了classList 属性和 contains 方法。 classList 属性返回应用于元素的类列表，并且 contains 方法检查该列表中是否包含特定类。

const element = document.getElementById("test");
const hasClass1 = element.classList.contains("class1");

无论元素上存在多少类，此方法都能可靠地工作。

替代方法：

如果目标浏览器不支持 classList，则可以采用利用 indexOf 函数的替代方法：

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

实现：

要将此方法应用于问题中提供的示例，请替换原始 switch 语句使用以下代码：

const element = document.getElementById("test");
const classes = ["class1", "class2", "class3", "class4"];

element.textContent = "";

for (let i = 0; i < classes.length; i++) {
  if (element.classList.contains(classes[i])) {
    element.textContent = `I have ${classes[i]}`;
    break;
  }
}

此代码迭代预期的类并显示出现在元素。

以上是如何可靠地检查 HTML 元素是否包含 JavaScript 中的特定类？的详细内容。更多信息请关注PHP中文网其他相关文章！