<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>addClassName , removeClassName</title> </head> <body> <div id="div1" class="bb"> div1 </div> <div id="div2" class="box dd bb"> div2 </div> <script type="text/javascript"> var oDiv1 = document.getElementById("div1"); var oDiv2 = document.getElementById("div2"); addClass(oDiv1 , 'box'); removeClass(oDiv2,'box'); function addClass(obj,className){ //如果原来没有class if(obj.className == ""){ obj.className = className; }else{ var _index = classIndexOf(obj,className); //如果原来没有这个新加的class if(_index == -1){ obj.className += " " + className; } } } function removeClass(obj,className){ //如果以前的元素不为空 if(obj.className != ""){ var arrClassName = obj.className.split(" "); var _index = classIndexOf(obj,className); //如果存在要删除的class if(_index != -1){ arrClassName.splice(_index,1); } obj.className = arrClassName.join(" "); } } //检验是否包含有某一个class function classIndexOf(obj,v){ var arrClassName = obj.className.split(" "); for(var i=0;i<arrClassName.length;i++){ if(arrClassName[i] == v){ return i; } } return -1; } </script> </body> </html>