正文
【实践】用js 实现 jq 的removeClass 方法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js removeClass 应用</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #000;
}
.test1{
border:1px solid red;
}
.test2{
border: 5px solid #ff0;
}
.test3{
border: 8px solid #f00;
}
.test4{
border: 10px solid #999;
}
.test5{
border: 12px solid #ccc;
}
</style>
</head>
<body>
<div class="test1 test2 test3 test4 test5"></div>
js代码
<script type="text/javascript">
window.onload = function(){
var div = document.getElementsByTagName('div')[0];
removeClass(div,"test2"); function removeClass(elem,classname){
//首先进行初次判断目标元素是否存在类名
//如果有开始执行具体操作
//如果没有调用控制台报错
if(elem.className != ""){
//先把目标元素的所有类名保存在数组中
//类名的存在是以空格隔开的 所以调用split()方法传入一个空格参数
var allClassName = elem.className.split(" ");
console.log("第一次赋值后class数量为：" + allClassName);
var result;//完成操作后保存类名（在以后调用）
var listClass;//保存修改过后的数组 //1.首先遍历一次所有类名
for (var i = 0; i < allClassName.length; i++) {
if(allClassName[i] == classname){
//如果在所有类名里面找到要删除的类名执行如下操作
//将对应的类名删除，调用splice方法，第一个参数是要删除元素的索引
//第二个参数是删除元素的个数
allClassName.splice(i,1); } } //把 allClassName 数组赋值给 listClass 数组
listClass = allClassName;
//遍历listClass 数组
for (var j = 0; j < listClass.length; j++) {
//把第一个数组元素赋值给 result时要直接赋值不然会出现undefined
//之后加上空格因为类名的存在形式就是用空格分隔的
if (j == 0) {
result = listClass[j];
result += " ";
}else{
//除第一个以外的元素就可以用 加法运算保存在result字符串里面
result += listClass[j];
result += " ";
}
} console.log("处理后的listClass数量" + listClass);
elem.className = result;//将目标元素的类名重新被 result 覆盖掉 }else{
console.log("目标元素没有存在的类名")
} }
}
</script>
