JavaScript classList 屬性

admin發表於2018-11-10
JavaScript

classList屬性可以獲取應用於指定元素上的樣式類集合。

通過HTML元素的class屬性為其設定樣式類。

此屬性是HTML5新增。

程式碼片段如下：

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

classList屬性可以獲取class的屬性值"a"，返回值是一個只包含一個元素的集合。

為什麼說返回值是一個集合呢，因為HTML元素的class屬性值可以包含多個樣式類。

程式碼片段如下：

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

上述程式碼為div元素應用了三個class樣式類。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
element.classList

在HTML5之前可以使用className也可以實現相同的功能，但沒有classList方便。

兩個屬性具體差別可以參閱classList與className區別一章節。

瀏覽器相容性:

（1）.IE10+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  console.log(odiv.classList);
}
</script>  
</head>  
<body>  
<div id="ant" class="a b c">螞蟻部落</div>
</body>  
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/144254hb7vvomalnnt2ohb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.通過class屬性為div元素設定了三個樣式類。

（2）.classList屬性返回一個集合，此集合具有三個元素，分別是class屬性設定的三個樣式類名。

（3）.集合length屬性返回集合元素的數量。

（4）.集合value屬性返回元素class屬性值。

（5）.集合還具有其他方法，下面將通過程式碼例項做介紹。

一.add方法：

此方法可以為當前元素新增一個指定的class樣式類。

程式碼例項如下：

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

點選按鈕之後，可以為div元素新增class樣式類"c"。

新增樣式類後截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/144325iuhuxwjo75s4h4mw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到div元素class屬性值已經增加了"c"。

二.contains方法：

此方法可以判斷指定元素是否具有指定名稱的class樣式類。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  console.log(odiv.classList.contains("b"));
  console.log(odiv.classList.contains("c"));
}
</script>  
</head>  
<body>  
<div id="ant" class="a b">螞蟻部落</div>
</body>  
</html>

控制檯列印效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/144353kqxl1qhhsl8y8sy3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果具有指定的樣式類，那麼方法返回true，否則返回false。

三.item方法：

此方法可以獲取集合中指定位置class樣式類名稱。

引數是一個數字，表示樣式類名稱在集合中的位置，從0開始計算。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  console.log(odiv.classList.item(1));
}
</script>  
</head>  
<body>  
<div id="ant" class="a b">螞蟻部落</div>
</body>  
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/144424s8jjkx5ackb3bcaw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

索引為值從0開始計算，那麼上述程式碼可以獲取集合中第二個樣式類的名稱。

集合中類名的順序按照HTML元素class屬性值規定的類名從左到右計算。

四.remove方法：

此方法可以刪除一個或者多個指定的樣式類。

引數是要移除的類名，程式碼例項如下：

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

點選按鈕可以刪除樣式類"a"和"b"，刪除後截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/144451odlznt48ueul0ld0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到樣式類"a"與"b"已經被刪除。

五.toggle方法：

此方法稍微複雜一點點，考慮到篇幅問題，關於它的介紹在單獨一篇文章介紹。

具體參閱JavaScript toggle() 方法一章節。

相關文章