JavaScript toggle()

admin發表於2018-11-11
JavaScript

toggle() 是 HTML5 新增，本文將通過程式碼例項分步詳細介紹一下它的用法。

此方法屬於 DOMTokenList 型別集合物件，用於切換 class 樣式類的刪除與新增。

元素的 classList 屬性返回值即是 DOMTokenList 型別。

關於 classList 更多內容參閱JavaScript classList 屬性一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
toggle(class, bool)

引數解析：

（1）.class：必需，class樣式類名。

（2）.bool：可選，一個布林值，規定執行刪除操作還是新增操作，如果為true，則執行新增操作，無論是否元素當前是否具有指定的樣式類，如果為false，則執行刪除操作，無論是否元素具有指定的樣式類，如果省略此引數，則執行樣式類的新增和刪除切換操作。

瀏覽器相容性：

（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");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.classList.toggle("a");
  }
}
</script>  
</head>  
<body>  
<div id="ant" class="a b c">螞蟻部落</div>
<input type="button" id="bt" value="檢視效果"/>
</body>  
</html>

程式碼分析如下：

（1）.div元素的class屬性具有三個樣式類，分別是"a","b"和"c"。

（2）點選按鈕之後，可以切換樣式類"a"新增或者刪除，由於div元素已經具有樣式類"a"，那麼首次的點選按鈕可以刪除樣式類"a"，當第二個點選按鈕的時候，再新增此樣式類"a"，以此類推。

[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.toggle("a");
  }
}
</script>  
</head>  
<body>  
<div id="ant" class="b c">螞蟻部落</div>
<input type="button" id="bt" value="檢視效果"/>
</body>  
</html>

上面的div元素預設並沒有class樣式類"a"，當首次點選按鈕，會新增樣式類"a"。

再次點選此按鈕會將"a"刪除，以此類推。

[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.toggle("a",true);
  }
}
</script>  
</head>  
<body>  
<div id="ant" class="b c">螞蟻部落</div>
<input type="button" id="bt" value="檢視效果"/>
</body>  
</html>

為toggle方法規定第二個引數，此引數規定方法是執行刪除操作還是新增操作。

（1）.true，執行新增操作。

（2）.false，執行刪除操作。

規定第二個引數之後，toggle方法失去對類的新增和刪除切換功能，只執行一種操作。

toggle(class,true)等同於add(class)

toggle(class,false)等同於remove(class)

特別說明：IE瀏覽器並不支援第二個引數。

相關文章