DOMTokenList: toggle() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
token
-
A string representing the token you want to toggle.
force
Optional-
If included, turns the toggle into a one way-only operation. If set to
false
, thentoken
will only be removed, but not added. If set totrue
, thentoken
will only be added, but not removed.
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