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)

参数

返回值

无。

浏览器支持

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

它得到所有浏览器的支持：

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

相关页面

length 属性

item() 方法

add() 方法

remove() 方法

replace() 方法

forEach() 方法

entries() 方法

keys() 方法

values() 方法

DOMTokenList 对象