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

最新推荐文章于 2023-07-23 09:01:22 发布

颖_恋

最新推荐文章于 2023-07-23 09:01:22 发布

阅读量1.6k

点赞数 1

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/line233/article/details/89071598

版权

这篇博客介绍了如何使用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元素是否有

最低0.47元/天解锁文章