<!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>
