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

这篇博客介绍了如何使用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)
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值