如何有效地确定 HTML 元素中的类是否存在？

确定元素中的类存在

识别元素的类成员身份对于 CSS 样式和动态 HTML 操作至关重要。虽然 JavaScript 提供了检索元素的 className 属性的方法，但在处理多个类时检查其是否存在会带来挑战。

现有方法：

目前，一种常见的方法包括:

switch (testClass) {
  case "class1":
    test.innerHTML = "I have class1";
    break;
  // ...
  default:
    test.innerHTML = "";
}

但是，当元素具有多个类时，此方法会出现不足，因为它仅匹配精确匹配。

使用 element.classList.contains:

更定制的解决方案是利用 element.classList.contains 方法：

element.classList.contains(class);

所有现代浏览器都支持此方法，并提供一种简洁的方法来验证类成员资格。

使用indexOf的自定义函数：

对于不支持classList的旧版浏览器，可以使用使用indexOf的自定义函数：

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

此函数确保指定class 位于元素的 className 属性内，即使它是另一个类名的一部分。

使用循环的替代方法：

如果您希望将此功能与switch 语句中，您可以循环遍历潜在类名的数组：

var test = document.getElementById("test");
var 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;
    }
}

这种方法提供了更大的灵活性并避免了重复的 switch 情况。

以上是如何有效地确定 HTML 元素中的类是否存在？的详细内容。更多信息请关注PHP中文网其他相关文章！