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

最新推荐文章于 2021-08-03 19:09:26 发布

颖_恋

最新推荐文章于 2021-08-03 19:09:26 发布

阅读量1.5k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/line233/article/details/89071598

版权

（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

最低0.47元/天解锁文章

颖_恋

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
封装addClass()为元素添加class、removeClass()删除class

（1）使用原生js封装一个addClass方法，为页面上DOM元素动态添加className 首先要保证新添加的class不会覆盖原来的className 方法一：利用字符串拼接（可以添加一到多个className）<!DOCTYPE html><html lang="en"><head> <met...
复制链接

扫一扫