给dom元素节点的class属性任意位置添加类名,移除类名时不留空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div class="active">点我变色</div>
<div class="active on-active box">点我变色</div>
<div class="box on-active active">点我变色</div>
<script>
// 判断类名是否存在:-1不存在,>=0存在
function hasClass(ele, className) {
if (!ele.className) return -1;
// 将类名用空格分隔,并组成一个数组
var arr = ele.className.split(' ');
// 查找目标类名是否在数组中
var index = arr.indexOf(className);
return index;
}
// 添加类名
function addClass(ele, className) {
if (hasClass(ele, className) > -1) return; //类名存在,直接返回
ele.className += (ele.className ? ' ' + className : className);
}
// 移除类名
function removeClass(ele, className) {
var index = hasClass(ele, className);
if (index > -1) {
var arr = ele.className.split(' ');
arr.splice(index, 1);
ele.className = arr.join(' ');
}
}
var oDivs = document.querySelectorAll('div');
oDivs.forEach(function(item) {
item.flag = true;
item.onclick = function() {
if (!this.flag) {
addClass(this, 'active');
} else {
removeClass(this, 'active');
}
this.flag = !this.flag;
}
})
</script>
</body>
</html>