JS(类的操作)

通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便

一行代码，可以同时修改多个样式
可以通过修改元素的class属性来间接的修改样式
这样一来，我们只需要修改一次，即可同时修改多个样式，
浏览器只需要重新渲染页面一次，性能比较好，
并且这种方式，可以使表现和行为进一步的分离

            /**
             * obj:制定元素
             * cn:对应类名
             **/
            //定义一个函数，来向一个元素添加类
            function addClass(obj,cn){
                
                if(!hasClass(obj,cn))
                {
                    obj.className+=" "+cn;
                }
            }
            //定义一个函数判断一个元素有没有这个类
            function hasClass(obj,cn){
                //创建一个正则表达式
                var reg=new RegExp("\b"+cn+"\b");
                return reg.test(obj.className)
            }
            //定义一个函数来删除对应元素中的类
            function removeClass(obj,cn){
                //创建一个正则表达式
                var reg=new RegExp("\b "+cn+"\b");
                //删除Class
                obj.className=obj.className.replace(reg,"");
            }
            //定义一个函数来切换一个类
            function toggleClass(obj,cn){
                //判断是否有这个类
                if(hasClass(obj,cn))
                {
                    //如果有则删除
                    removeClass(obj,cn);
                }
                else
                {
                    //没有则添加
                    addClass(obj,cn);
                }
            }