DOMTokenList: toggle() method
The toggle()
method of the DOMTokenList
interface
removes an existing token from the list and returns false
.
If the token doesn't exist it's added and the function returns true
.
Syntax
toggle(token)
toggle(token, force)
Parameters
Return value
A boolean value, true
or false
, indicating whether token
is in the
list after the call or not.
Examples
Toggling a class on click
In the following example we retrieve the list of classes set on a
<span>
element as a DOMTokenList
using
Element.classList
. We then replace a token in the list, and write the
list into the <span>
's Node.textContent
.
First, the HTML:
<span class="a b">classList is 'a b'</span>
Now the JavaScript:
const span = document.querySelector("span");
const classes = span.classList;
span.addEventListener("click", () => {
const result = classes.toggle("c");
span.textContent = `'c' ${
result ? "added" : "removed"
}; classList is now "${classes}".`;
});
The output looks like this and it will change each time you click on the text:
Setting the force parameter
The second parameter can be used to determine whether the class is included or not. This example would include the 'c' class only if the browser window is over 1000 pixels wide:
span.classList.toggle("c", window.innerWidth > 1000);
Specifications
Specification |
---|
DOM Standard # ref-for-dom-domtokenlist-toggle① |
Browser compatibility
BCD tables only load in the browser