DOM样式名操作

cls.js

(function(opt_ns , opt_wind){
 
	var clsSplitor = /\s+/ ,			
	       support = !document.body.classList ? false : true ;
	
	function trim(str) {					
	
		if(Object.prototype.toString.call(str) !== "[object String]"){
			return ""
		}
		if ("".trim) {
			return str.trim() ;
		}else{
			return str.replace(/^\s+|\s+$/g, '') ;
		}
	}
	
	
	function isDomEl(node) {
		return node.nodeType == 1 && node.className != undefined;
	}
	
	function getClassReg(cls){
		return new RegExp('(^|\\s+)'+ cls +'(\\s+|$)' , 'g') ;
	}
	
	var ClassHelper = {
		
		add:function(el,multiCls){
			
			multiCls = trim(multiCls);
			
			if(!isDomEl(el) || multiCls == ""){
				return ;
			}
			
			var clsArray = multiCls.split(clsSplitor);						
			      length = clsArray.length ,
			     clsName = "";
			
			if(support){
				
				for(var i = 0 ; i < length ; i++){
					el.classList.add(clsArray[i]);
				}				
			}else{
				var clsName="";
				
				for(var i = 0 ; i < length ; i++){
					
					if (!this.contains(el , clsArray[i])) {
						
						clsName += clsArray[i]+" ";
					}
				}
				el.className = el.className + ' ' + trim(clsName);
			}
			
			return this ;
		},
		
		contains:function(el,cls){
			
			cls = trim(cls);
			
			if(!isDomEl(el) || cls == ""){
				return false;
			}
	
			if(support){
				return el.classList.contains(cls);
			}
			
			return getClassReg(cls).test(el.className) ;											
	
		},
	
		remove:function(el,multiCls){
			
			multiCls = trim(multiCls);
			
			if(!isDomEl(el) || multiCls==""){
				return ;
			}
			
			var clsArray = multiCls.split(clsSplitor);						
			      length = clsArray.length ,
			     clsName = "";						
			
			if(support){
				for(var i = 0 ; i < length ; i++){
					el.classList.remove(clsArray[i]);
				}				
	
			}else{
				
				clsName = el.className ;
				
				for(var i = 0 ; i < length ; i++){
					
					if (this.contains(el , clsArray[i])) {
	 								
						clsName = clsName.replace(getClassReg(clsArray[i]) , '');
					};
				}
	
				el.className = trim(clsName);
			}
			
			return this ;
		},
		
		toggle:function(el , multiCls){
			
			multiCls = trim(multiCls);
			
			if(!isDomEl(el) || multiCls == ""){
				return ;
			}
			
			var clsArray = multiCls.split(clsSplitor),						
			      length = clsArray.length ,
			          fn = null ,
			         cls = "";
			
			if(support){
				for(var i = 0 ; i < length ; i++){
					el.classList.toggle(trim(clsArray[i]));	
				}				
			}else{
				for(var i = 0 ; i < length ; i++){
					cls = trim(clsArray[i]);
					fn = this.contains(el , cls) ? this.remove : this.add ;
					fn.call(this,el,cls);	
				}		
			}	
			return this;
		}
	};
	opt_ns =  opt_ns || opt_wind;
	opt_ns.ClassHelper = ClassHelper ;
	
})( window) ;	

reference

• className
• classList

Code

• cls.js

Code

HTML

<div id="myBox" class="box"></div>
<button id="add">Add</button>
<button id="remove">remove</button>
<button id="toggle">toggle</button>

CSS

.box{
     width: 100px;
     height: 100px;
     border:1px solid #bcbcbc;
 }
.red-bcolor{
      border-color: red;
 }
.bg{
       background-color: green;
}

JavaScript

<script type="text/javascript">

    function $(id){
        return document.getElementById(id);
    }
    var box = $("myBox")
    $("add").onclick=function(){

        ClassHelper.add(box,"red-bcolor");
    }
    $("remove").onclick=function(){
        ClassHelper.remove(box,"red-bcolor");
    }
    $("toggle").onclick=function(){

        ClassHelper.toggle(box,"red-bcolor bg");
    }
</script>