分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

原生JS操作增加删除类

发布时间:2023-09-06 01:32责任编辑:郭大石关键词:暂无标签

<!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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved