043 操作class属性

通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面。这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
修改box的class属性
　　-我们可以通过修改元素的class属性来间接的修改样式
　　-这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步的分离

添加指定的class属性值

//定义一个函数，用来向一个元素中添加指定的class属性值
   /*
    * 参数:
    *  obj 要添加class属性的元素
    *  cn 要添加的class值
    *  
    */
   function addClass(obj , cn){
    	//检查obj中是否含有cn
    	if(!hasClass(obj , cn)){
     		obj.className += " "+cn;
    	}
   }   

判断

//判断一个元素中是否含有指定的class属性值
//如果有该class，则返回true，没有则返回false
   function hasClass(obj , cn){
    	//判断obj中有没有cn class
    	//创建一个正则表达式
    	//var reg = /\bb2\b/;
   	 var reg = new RegExp("\\b"+cn+"\\b");
    	return reg.test(obj.className);    
   }

删除

//删除一个元素中的指定的class属性
   function removeClass(obj , cn){
    	//创建一个正则表达式
    	var reg = new RegExp("\\b"+cn+"\\b");
    	//删除class
   	 obj.className = obj.className.replace(reg , "");
   }

切换

    /* toggleClass可以用来切换一个类
    *  如果元素中具有该类，则删除
    *  如果元素中没有该类，则添加
    */
   function toggleClass(obj , cn){
    	//判断obj中是否含有cn
   	 if(hasClass(obj , cn)){
     		//有，则删除
     		removeClass(obj , cn);
   	 }else{
     		//没有，则添加
     		addClass(obj , cn);
    	}
   }