Operation of js class, modify css, package and modify common functions of class

1. Disadvantages

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

2. So I should solve it, and reduce the coupling between css and js

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

box.className += " b2";
通过下面的代码只需要一行
addClass(box,"b2");
removeClass(box,"b2");
toggleClass(box,"b2");

3. Package

3.1 addClass

定义一个函数，用来向一个元素中添加指定的class属性值
			
			 * 参数:
			 * 	obj 要添加class属性的元素
			 *  cn 要添加的class值

			function addClass(obj , cn){
    
    
				
				//检查obj中是否含有cn
				if(!hasClass(obj , cn)){
    
    
					obj.className += " "+cn;
				}
				
			}

3.2 hasClass

			 * 判断一个元素中是否含有指定的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);
				
			}

3.3 removeClass

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

3.4 toggleClass

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