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>