原生JS操作增加删除类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js原始增加删除类</title>
<style type="text/css">
.red{
color: red;
}
.border{
border: 1px solid;
}
.italic{
font-style: italic;
}
.owner{
padding: 20px;
}
</style>
</head>
<body>
<div class="red border italic" id="div1">
文本
</div>
<script type="text/javascript">
var oDiv=document.getElementById('div1');
removeClass( oDiv,'red' );
function removeClass(obj,cN) {
var strClassName=obj.className;
var arrClassName=strClassName.split(' ');
//循环检查元素有没有我们要删除的类，如果有执行删除操作
for(var i=0;i<arrClassName.length;i++){
if(arrClassName[i]==cN){
arrClassName.splice(i,1);
obj.className=arrClassName.join(' ');
break;
}
}
}
addClass( oDiv,'owner' );
function addClass(obj,cN) {
var strClassName=obj.className;
var arrClassName=strClassName.split(' ');
//检查元素本身有没有这个要添加的类
for(var i=0;i<arrClassName.length;i++){
if(arrClassName[i]==cN){
break;
}
}
//如果元素的类没有这个要添加的类，就操作添加
if(i==arrClassName.length){
obj.className=arrClassName.join(' ')+' '+cN;
}
}
</script>
</body>
</html>
