【实践】用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>
