HTML DOMTokenList toggle() 方法

定義和用法

toggle() 方法從列表中刪除給定的標記并返回 false。如果標記不存在，則添加并返回 true。

實例

例子 1

切換 "myStyle" 的開閉：

const list = element.classList;
list.toggle("mywStyle");

親自試一試

例子 2

將 "myStyle" 類添加到元素：

const list = element.classList;
list.add("myStyle");

親自試一試

例子 3

從元素中刪除 "myStyle" 類：

const list = element.classList;
list.remove("myStyle");

親自試一試

例子 4

向元素添加多個類：

element.classList.add("myStyle", "anotherClass", "thirdClass");

親自試一試

例子 5

從一個元素中刪除多個類：

element.classList.remove("myStyle", "anotherClass", "thirdClass");

親自試一試

例子 6

獲取元素的類數量：

let numb = element.classList.length;

親自試一試

例子 7

在類之間切換以創建下拉按鈕：

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

親自試一試

語法

domtokenlist.toggle(token)

參數

參數 描述
token 必需。要切換的標記。

返回值

無。

瀏覽器支持

domtokenlist.toggle() 是 DOM Level 4 (2015) 特性。

它得到所有瀏覽器的支持：

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

Internet Explorer 11（或更早版本）不支持 domtokenlist.toggle()。

相關頁面

length 屬性

item() 方法

add() 方法

remove() 方法

replace() 方法

forEach() 方法

entries() 方法

keys() 方法

values() 方法

DOMTokenList 對象