classList與className區別

admin發表於2018-11-22

HTML中絕大多數元素都具有class屬性。

程式碼片段如下：

[HTML] 純文字檢視 複製程式碼
<div class="a">螞蟻部落</div>

利用此屬性可以為元素設定指定的CSS樣式。

JavaScript可以通過className屬性動態獲取或者設定元素的class屬性值。

進而達到動態設定元素外觀的功能，由於class是JavaScript中的關鍵字。

所以沒有使用class作為dom物件屬性，而是使用className替代。

HTML5新增classList屬性，同樣可以操作元素class屬性。

下面通過程式碼例項介紹一下兩者的區別，關於它們具體用法參閱如下兩篇文章：

（1）.className參閱JavaScript className一章節。

（2）.classList參閱JavaScript classList一章節。

一.瀏覽器相容問題：

（1）.className：

這是className主要優勢，所有瀏覽器都支援className屬性。

（2）.classList：

此屬性HTML5新增，對IE瀏覽器並不友好，IE10+與其他主流瀏覽器支援此屬性。

二.操作元素class屬性：

className屬性返回值是一個字串，內容就是HTML元素的class屬性內容。

classList屬性返回一個包含指定元素所有樣式類的集合物件。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border:10px solid red;
}
.a{background-color:#ccc;}
.b{color:green;}
</style>
<script> 
window.onload=function(){
  let obt=document.getElementById("bt");
  let odiv = document.getElementById("ant");
  obt.onclick = function () {
    console.log(odiv.className);
    console.log(odiv.classList);
  }
}
</script> 
</head> 
<body> 
<div id="ant" class="a b">螞蟻部落</div>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/22/165718zcb22icoo8wa8c3t.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.className的返回值就是包含元素class屬性值的字串。

（2）.classList返回值是DOMTokenList型別集合，通過此集合可以非常便利的操作元素class屬性。

上述兩個特點決定了它們操作的便利性不在一個等級。

通過className操作class屬性，本質是對字串的操作，比如判斷class是否具有樣式類"b"。

那麼需要自己寫程式碼，將返回的字串分解為各個樣式類，然後再進行判斷，相對比較麻煩。

如果利用classList屬性，那麼將是非常輕鬆愉快的事情，使用DOMTokenList集合的contains方法即可實現。

程式碼演示如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border:10px solid red;
}
.a{background-color:#ccc;}
.b{color:green;}
</style>
<script> 
window.onload=function(){
  let obt=document.getElementById("bt");
  let odiv = document.getElementById("ant");

  String.prototype.trim=function(){ 
    return this.replace(/(^\s*)|(\s*$)/g,""); 
  } 
  Array.prototype.removeByValue = function(val) {
    let arr=[];
    for(let i=0; i<this.length; i++) {
      if(this[i] != val) {
        arr.push(this[i]);
      }
    }
    return arr;
  }
  function contains(arr,content) {
    let i=arr.length;
    while(i--) {
      if (arr[i]===content) {
        return true;
      }   
    }   
    return false;
  }

  obt.onclick = function () {
    let str = odiv.className.trim();
    let arr=str.split(" ");
    let classaArr=arr.removeByValue("");
    console.log(contains(classaArr,"b"));
    
    let list=odiv.classList;
    console.log(list.contains("b"));
  }
}
</script> 
</head> 
<body> 
<div id="ant" class="a b">螞蟻部落</div>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

利用className與classList都實現了判斷是否具有"b"的功能。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/22/165748jytmiszx9q19gox6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

但是兩者的便利性簡直天壤之別，操作字串需要自己實現大量功能。

而利用classList返回的集合物件，只需要一個contains方法即可。

集合還具有其他方法，分別如下：

（1）.add()：新增樣式類。

（2）.item()：返回指定索引的樣式類。

（3）.remove()：刪除指定樣式類。

（4）.toggle()：切換樣式類。

上述方法的具體用法可以參閱JavaScript classList一章節。

相信看了上述介紹，會對兩個屬性的區別有了比較詳盡瞭解。

classList更加方便，但是相容性問題很大，當前暫時推薦使用className。

相關文章