码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOMTokenList toggle()

❮ The DOMTokenList Object

Examples

Toggle "myStyle" on and off:

const list = element.classList;
list.toggle("mywStyle");
Try it Yourself »

Add a "myStyle" class to an element:

const list = element.classList;
list.add("myStyle");
Try it Yourself »

Remove the "myStyle" class from an element:

const list = element.classList;
list.remove("myStyle");
Try it Yourself »

More examples below.

Description

The add() method adds one (or more) tokens to a DOMTokenList.

See Also:

The length Property

The item() Method

The add() Method

The remove() Method

The replace() Method

The forEach() Method

The entries() Method

The keys() Method

The values() Method

The DOMTokenList Object

Syntax

domtokenlist.toggle(token)

Parameters

Parameter Description
token Required.
The token to toggle.

Return Value

NONE

More Examples

Add multiple classes to the an element:

element.classList.add("myStyle", "anotherClass", "thirdClass");
Try it Yourself »

Remove multiple classes from an element:

element.classList.remove("myStyle", "anotherClass", "thirdClass");
Try it Yourself »

Get the number of classes for an element:

let numb = element.classList.length;
Try it Yourself »

Toggle between classes to create a dropdown button:

document.getElementById("myBtn").onclick = function() {myFunction()};

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
Try it Yourself »

Browser Support

domtokenlist.toggle() is a DOM Level 4 (2015) feature.

It is supported in all modern browsers:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

domtokenlist.toggle() is not supported in Internet Explorer 11 (or earlier).

❮ The DOMTokenList Object