JavaScript类的操作

类的操作
在之前修改div属性都是通过style来一个属性一个属性修改，这就需要浏览器重新渲染一次页面，这样执行的性能比较差，要修改多个样式也比较不方便
通过修改box的class属性，来间接修改多个样式，浏览器只需要加载一次box.className="box2"(box2是在<style>中定义的属性）

//定义函数，向一个元素中添加指定class属性obj是要添加class的属性，cn是要添加class的值
        function addClass(obj,cn){
            if(!hasClass(obj,cn)){
                obj.className+=" "+cn;
            }
        }
        function hasClass(obj,cn){
            //判断obj中有没有cn class
            //创建一个正则表达式
            
            var reg=new RegExp("\\b"+cn+"\\b");
            return reg.test(obj.className);
        }
        //删除一个元素中指定的class属性
        function removeClass(obj,cn){
            var reg=new RegExp("\\b"+cn+"\\b");
            obj.className=obj.className.replace(reg,"")
        }

        //切换类，若元素中有该类则删除，没有则添加
        function toggleClass(obj,cn){
            if(hasClass(obj,cn)){
                removeClass(obj,cn);
            }else{
                addClass(obj,cn);
            }
        }


//使用
toggleClass(box1,"box2");