原生JS操作增加删除类

Posted 奔跑的小溪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生JS操作增加删除类相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js原始增加删除类</title>
        <style type="text/css">
            .red{
                color: red;
            }
            .border{
                border: 1px solid;
            }
            .italic{
                font-style: italic;
            }
            .owner{
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="red border italic" id="div1">
            文本
        </div>
        <script type="text/javascript">
            var oDiv=document.getElementById(‘div1‘);
            removeClass( oDiv,‘red‘ );
            function removeClass(obj,cN) {
                var strClassName=obj.className;
                var arrClassName=strClassName.split(‘ ‘);
                //循环检查元素有没有我们要删除的类,如果有执行删除操作
                for(var i=0;i<arrClassName.length;i++){
                    if(arrClassName[i]==cN){
                        arrClassName.splice(i,1);
                        obj.className=arrClassName.join(‘ ‘);
                        break;
                    }
                }    
            }
            addClass( oDiv,‘owner‘ );
            function addClass(obj,cN) {
                var strClassName=obj.className;
                var arrClassName=strClassName.split(‘ ‘);
                //检查元素本身有没有这个要添加的类
                for(var i=0;i<arrClassName.length;i++){
                    if(arrClassName[i]==cN){
                        break;
                    }
                }
                //如果元素的类没有这个要添加的类,就操作添加
                if(i==arrClassName.length){
                    obj.className=arrClassName.join(‘ ‘)+‘ ‘+cN;
                }
            }
        </script>
    </body>
</html>



























































以上是关于原生JS操作增加删除类的主要内容,如果未能解决你的问题,请参考以下文章

原生JS实现增加删除class

原生JS如何查询一个元素的class,增加一个class,删除一个class

原生js实现table的增加删除

原生js实现table的增加删除

原生JS实现的DOM操作笔记(草稿整理)

原生JS中数组常见的方法