Hanyar HTML DOMTokenList toggle()

Tirra da Amfani

Hanyar toggle() yana kama cewa ya kawo kuduwa da kaiwa cewa ya cire shigi na cirewa. Idan shigi ba za a cire, ya kawo kuduwa da cirewa.

Tasiri

Tarihin 1

Saiwai "myStyle" daga kuduwa da kaiwa:

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

亲自试一试

Tarihin 2

Duba "myStyle" gaski a kan kudu:

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

亲自试一试

Tarihin 3

Duba "myStyle" gaski daga kudu:

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