如何使用 JavaScript 检查 HTML 元素中是否存在类？

使用 JavaScript 检查元素类是否存在

在 JavaScript 中，使用现代浏览器可以轻松确定 HTML 元素是否拥有特定类固有的 classList 对象。 classList .contains() 方法允许您验证元素上是否存在类。其语法如下：

element.classList.contains(class);

当前所有浏览器都支持此方法，并且旧版浏览器也可以使用 Polyfill。

旧版浏览器的替代方法

如果与旧版浏览器的兼容性至关重要，并且您希望避免填充，可以使用使用 indexOf() 的替代方法：

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

这种优化方法可确保仅检测到精确的类匹配，防止部分类匹配出现误报。

将解决方案应用于提供的示例

在提供的示例中，switch 语句不能与 classList 和 indexOf 方法一起使用。但是，您可以使用以下代码获得相同的结果：

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

修改后的代码更加简洁，消除了多余的检查，同时准确识别 HTML 元素中的类。

以上是如何使用 JavaScript 检查 HTML 元素中是否存在类？的详细内容。更多信息请关注PHP中文网其他相关文章！