首页 > web前端 > js教程 > 如何有效地检查 JavaScript 中元素类是否存在?

如何有效地检查 JavaScript 中元素类是否存在?

DDD
发布: 2024-11-30 20:30:16
原创
657 人浏览过

How to Efficiently Check for Element Class Presence in JavaScript?

检查 JavaScript 中是否存在元素类

使用基本的 JavaScript,如何确定元素是否包含特定类?使用 className 属性时,需要精确的类匹配,这会导致元素具有多个类时受到限制。

解决方案:element.classList.contains

元素。 classList 公开了专门为此目的设计的 .contains 方法:

element.classList.contains(className);
登录后复制

所有现代浏览器都支持此方法并且可以为旧版本进行填充。

替代方案:使用indexOf

或者,您可以使用element.className和indexOf用于缺乏classList支持的旧版浏览器,但较小为了确保准确性,需要进行调整:

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}
登录后复制

这可以确保所寻找的类不是另一个类的子串name.

代码示例

将此解决方案应用于您的具体情况:

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;
    }
}
登录后复制

此代码通过循环采用更有效的方法预定义的潜在类数组,减少冗余并提高可维护性。

以上是如何有效地检查 JavaScript 中元素类是否存在?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板