首页 > Web开发 > 详细

原生JS操作增加删除类

时间:2017-12-28 10:27:40      阅读:226      评论:0      收藏:0      [点我收藏+]

<!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操作增加删除类

原文:https://www.cnblogs.com/limz/p/8134013.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!