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 对象