javascript如何刪除一個單獨的class樣式類

admin發表於2017-04-08
JavaScript

本章節介紹一下如何刪除一個元素的class樣式類。

也許很多朋友認為實現這個操作實在太過於簡單的了，設定指定元素的className屬性值為空即可。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
.a{
  width:200px;
  height:150px;
  background-color:#ccc;
  text-align:center;
  line-height:150px;
}
</style>
<script>
window.onload=function(){
  var odiv=document.getElementById("antzone");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.className="";
  }
 
}
</script>
</head>
<body>
<div id="antzone" class="a">螞蟻部落歡迎您</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

確實上面的程式碼非常的簡單，只要將className屬性值設定為空即可。

但是有沒有朋友想過class屬性值也可以是這樣的形式class="a b"，如果我們只想刪除類b，那麼應該如何處理。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
.a{
  width:200px;
  height:150px;
  background-color:#ccc;
  text-align:center;
  line-height:150px;
}
.b{
  color:red;
}
</style>
<script>
window.onload=function(){
  var odiv=document.getElementById("antzone");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    var classNameValue=odiv.className;
    var arr=classNameValue.split(" ");
    for(var index=0;index<arr.length;index++){
      if(arr[index]=="b"){
        arr.splice(index,1);
      }
    }
    odiv.className=arr.join();
  }
}
</script>
</head>
<body>
<div id="antzone" class="a b">螞蟻部落歡迎您</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var odiv=document.getElementById("antzone")，獲取div元素。

（3）.var obt=document.getElementById("bt")，獲取按鈕元素。

（4）.obt.onclick=function(){}，為按鈕註冊click事件處理函式。

（5）.var classNameValue=odiv.className，獲取元素的class屬性值。

（6）.var arr=classNameValue.split(" ")，將屬性值分割成陣列。

（7）.for(var index=0;index<arr.length;index++){},遍歷陣列中的每一個元素。

（8）.if(arr[index]=="b"){

  arr.splice(index,1);

}，如果當前索引值對應的陣列元素值等於b，那麼就刪除此值。

（9）.odiv.className=arr.join()，將陣列值連線起來並賦值給className屬性。

二.相關閱讀:

（1）.className屬性可以參閱js className屬性一章節。

（2）.split()方法可以參閱javascript split()一章節。

（3）.splice()方法可以參閱javascript 陣列 splice()一章節。

相關文章