JavaScript toggle() 方法
此方法屬於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瀏覽器並不支援第二個引數。
相關文章
- JavaScript toggle()JavaScript
- jQuery toggle()jQuery
- 2018-12-14jQuery 效果 - toggle() 方法jQuery
- jQuery opacity: 'toggle'作用jQuery
- 鴻蒙HarmonyOS實戰-ArkUI元件(Toggle)鴻蒙UI元件
- UGUI原始碼解析(Toggle和ToggleGroup)UGUI原始碼
- JavaScript Date() 方法JavaScript
- JavaScript show() 方法JavaScript
- JavaScript showModal() 方法JavaScript
- JavaScript repeat()方法JavaScript
- JavaScript map()方法JavaScript
- JavaScript copyWithin()方法JavaScript
- JavaScript match()方法JavaScript
- JavaScript find()方法JavaScript
- JavaScript test() 方法JavaScript
- JavaScript endsWith()方法JavaScript
- javascript isFinite()方法JavaScript
- javascript slice() 方法JavaScript
- javascript的match方法JavaScript
- JavaScript Array map() 方法JavaScript
- JavaScript 之迭代方法JavaScript
- javascript通用方法收集JavaScript
- JavaScript之FormData方法JavaScriptORM
- Javascript 加密解密方法JavaScript加密解密
- JavaScript陣列方法JavaScript陣列
- JavaScript Array常用方法JavaScript
- javascript模板方法模式JavaScript模式
- JavaScript手寫new方法JavaScript
- JavaScript陣列小方法JavaScript陣列
- javascript Array.from()方法JavaScript
- javascript中Date常用方法JavaScript
- JavaScript | 函式與方法JavaScript函式
- Javascript String物件方法JavaScript物件
- javascript陣列常用方法JavaScript陣列
- JavaScript陣列方法(splice)JavaScript陣列
- 在JavaScript中借用方法JavaScript
- JavaScript:Object屬性方法JavaScriptObject
- javascript contains方法JavaScriptAI