函数二：hasClass()

最新推荐文章于 2023-07-23 08:00:30 发布

转载最新推荐文章于 2023-07-23 08:00:30 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/littledu/articles/2026091.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用原生JavaScript检查DOM元素是否包含特定类名的方法。通过将类名字符串分割成数组并遍历检查，实现了高效准确的检测功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候，我们需要判断节点是否含有我们要寻找的class，这里，我们想到原生的JS给我们提供了className这个方法，既可以读又可以写。但class是可以组合的，也就是说，会有这种情况：class="test1 test2"，这样通过className获取出来的，则就是一个"test1 test2"字符串了，达不到我们要查找指定的class的目的。所以，我们有必要写一个可以获取指定class的函数。

思路：既然className能获取一整个class字符串，那我们能不能通过这一个字符串寻找到我们指定要的class字符串呢？我们知道，组合class是通过一个空格或者多个空格组合的，那么，是不是可以利用这个空格将所有class放进一个数组，然后遍历这个数组匹配到我们指定的class呢？答案是肯定的，根据以上分析，我们可以组织到下面的步骤：

1.利用className的特性将各个class存进数组；

2.遍历数组，匹配class；

3.成功匹配返回true，否则返回false。

现在，我们就可以将上面的思路用代码来实现，实现如下：

function hasClass(className,node){
        var classNames = node.className.split(/\s+/);    //步骤1
        
        for(var i = 0; i < classNames.length; i++){         //步骤2
            if(classNames[i] == className){
                return true;
            }
        }
        
        return false;
}

测试函数代码如下：

<script type="text/javascript">
    function hasClass(className,node){
        var classNames = node.className.split(/\s+/);
        
        for(var i = 0; i < classNames.length; i++){
            if(classNames[i] == className){
                return true;
            }
        }
        
        return false;
    }  
    window.onload = function(){
        var test = document.getElementById('test');
        alert(hasClass('test1',test));    //true
        alert(hasClass('test2',test));    //true
        alert(hasClass('test3',test));    //false
    }
</script>
</head>
<body>
    <div id="test" class="test1 test2">test</div>
</body>

//////////////////////////////////////////////// 华丽丽的分隔线///////////////////////////////////////////////////////

2012.3.5 add

一个更简短的写法：

1 var hasClass = function(element,className){
2      return new RegExp("(^|\\s)"+className+"(\\s|$)").test(element.className);
3 }

转载于:https://www.cnblogs.com/littledu/articles/2026091.html