封装addClass()为元素添加class、removeClass()删除class

最新推荐文章于 2024-11-14 06:20:07 发布

原创最新推荐文章于 2024-11-14 06:20:07 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript原生方法封装addClass和removeClass功能。对于addClass，提供了通过字符串拼接和正则表达式的两种实现方式。而对于removeClass，讨论了正则表达式、数组遍历、数组相减以及HTML5的classList属性这四种方法。文章强调在添加class时需要注意避免覆盖原有的className，并指出使用classList是更现代且便捷的选择。

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

（1）使用原生js封装一个addClass方法，为页面上DOM元素动态添加className

首先要保证新添加的class不会覆盖原来的className

方法一：利用字符串拼接（可以添加一到多个className）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul id='ul'></ul>

    <script type="text/javascript">
    /*
       1. 判断是否有DOM元素是否有class属性（ 没有则创建并且添加className ）

       2. 判断DOM元素的class样式中是否已存在要添加的className

       3. 将要添加的样式分割为数组，一个一个进行判断
    */

        var ul = document.getElementById('ul')

        // 封装addClass属性
        function addClass (element,new_class) {
            if(hasAttr(element)) {
                var classArr = element.className.split(' ')
                new_class = new_class.split(' ')

                if(hasClass(classArr,new_class)) {                    
                    new_class.forEach(function (value,index) {
                        if(classArr.indexOf(value)===-1) {
                            tmp.push(value)
                        }
                    })   
                } else {
                    tmp = new_class
                }
                element.className += ' ' + tmp.join(' ')
            } else {
                element.setAttribute('class',new_class)
            } 
        }

        //1. 判断是否有DOM元素是否有class属性
        function hasAttr (element) {
            return element.hasAttribute('class')
        }

        //2. 判断DOM元素的class样式中是否已存在要添加的className
        //   不管要添加多少class,都将其转化为数组判断是否与原样式重复
        function hasClass(classArr,new_class) {
            var flag = false
            new_class.forEach(function (value,index) {
                if (classArr.indexOf(value)!==-1) {
                    flag = true
                }
            })
            return flag
        }
    </script>
</body>
</html>

方法二：借用正则表达式(如果要添加多个class时不建议使用)

var ul = document.getElementById('ul')
        addClass(ul,'112')
        
        function addClass (element,new_class) {
            if(hasAttr(element)) {
                var oldClass = element.className
                if(!hasClass(oldClass,new_class)) {
                    element.className += ' ' + new_class
                }
            }
        }

        //1. 判断是否有DOM元素是否有class属性
        function hasAttr (element) {
            return element.hasAttribute('class')
        }

        //2. 判断DOM元素的class样式中是否已存在要添加的className
        function hasClass(oldClass,new_class) {
            var flag = false
            var reg = new RegExp('(^|\\s)'+new_class+'(\\s|$)')
            flag = reg.test(oldClass)
            return flag
        }

（2）封装一个removeClass方法，动态删除页面DOM元素的className

方法一：借助正则表达式

        // 与添加class类似

        var ul = document.getElementById('ul')
        removeClass(ul,'112')

        function removeClass (element,remove_class) {
            if(hasAttr(element)) {
                var oldClass = element.className
                if(hasClass(oldClass,remove_class)) {
                    var oldArr = oldClass.split(' ')
                    oldArr.splice(oldArr.indexOf(remove_class),1)
                    element.className = oldArr.join(' ')
                }
            }
        }

        //1. 判断是否有DOM元素是否有class属性
        function hasAttr (element) {
            return element.hasAttribute('class')
        }

        //2. 判断DOM元素的class样式中是否已存在要添加的className
        function hasClass(oldClass,new_class) {
            var flag = false
            var reg = new RegExp('(^|\\s)'+new_class+'(\\s|$)')
            flag = reg.test(oldClass)
            return flag
        }

方法二：借助数组遍历

var ul = document.getElementById('ul')

        // 封装removeClass属性
        removeClass(ul,'bbb ccc')
        function removeClass (element,remove_class) {
            if(hasAttr(element)) {
                var classArr = element.className.split(' ')
                remove_class = remove_class.split(' ')

                if(hasClass(classArr,remove_class)) {                    
                    remove_class.forEach(function (value,index) {
                        if(classArr.indexOf(value)!==-1) {
                            classArr.splice(classArr.indexOf(value),1)
                        }
                    })   
                }
                element.className = classArr.join(' ')
            } else{
                console.log('该元素没有class属性')
                return
            } 
        }

        //1. 判断是否有DOM元素是否有class属性
        function hasAttr (element) {
            return element.hasAttribute('class')
        }

        //2. 判断DOM元素的class样式中是否已存在要添加的className
        //   不管要添加多少class,都将其转化为数组判断是否与原样式重复
        function hasClass(classArr,new_class) {
            var flag = false
            new_class.forEach(function (value,index) {
                if (classArr.indexOf(value)!==-1) {
                    flag = true
                }
            })
            return flag
        }

方法三：使用数组相减

var ul = document.getElementById('ul')

        // 封装removeClass属性
        removeClass(ul,'bbb 1312')
        function removeClass (element,remove_class) {
            if(hasAttr(element)) {
                var classArr = element.className.split(' ')
                var remove_class = remove_class.split(' ')
                var tmp = []
                classArr.forEach((value)=>{
                var index = remove_class.findIndex(removeValue=>value == removeValue);
                if (index > -1) delete remove_class[index];
                else tmp.push(value);
            });
                console.log(remove_class)
                element.className = tmp.join(' ')
            } else{
                console.log('该元素没有class属性')
                return
            } 
        }
        //1. 判断是否有DOM元素是否有class属性
        function hasAttr (element) {
            return element.hasAttribute('class')
        }

方法三：利用HTML5的新特性classList

要给元素添加class，首先要清楚此元素的class是否已存在要添加的class，所以需要先获取该元素的class，可以给该原素添加一个id，使用querySelector(id名)得到该元素，然后利用HTML5新增的特性classList 获取到所有的class,其返回值为一个对象，

根据返回值可以发现，在value中存有全部的class，所以先使用 .value得到字符串，再使用 split 方法转化为数组，这样就可以很方便地遍历了，遍历的方法很简单，就不说了，如果遍历结果是不存在，则使用add()将它添加进去，反之什么也不做

function addClass() {
    const key = document.querySelector(`div[data-key="${UnicodeKey}"]`)
    const keyList = key.classList.value.split(' ');
    var i;
    for(i= 0; i<keyList.length,keyList[i]!=="key";i++) {}
    if(i<keyList.length) {
        key.classList.remove("key")
    } else {
        key.classList.add("key")
    }
    console.log(key.classList)
}