原生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>
原生JS操作增加刪除類