如何高效检查 JavaScript DOM 元素是否包含特定类？

在 JavaScript 中检查元素是否包含类

在 JavaScript 中，你可能会遇到需要判断 DOM 元素是否包含的场景一个特定的类。虽然您当前使用 element.className 和 switch 语句的方法可以工作，但当元素具有多个类时，它会受到限制。

使用 element.classList.contains()

为了更好的跨浏览器兼容性，您可以使用 element.classList.contains() method:

element.classList.contains(className);

此方法返回一个布尔值，指示元素是否具有指定的类。所有主要浏览器都支持它。

indexOf 的替代方法

如果您正在使用不支持 element.classList 的旧版浏览器，您可以修改您现有的indexOf方法如下：

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

这确保检查仅在您正在查找的类是时才返回true不包含在另一个类名中。

示例实现

将更新的技术应用于您的示例：

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

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

此方法处理以下情况测试元素有多个类，确保即使存在其顺序或其他类，也能检测到正确的类。

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