DOMTokenList: toggle() method

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, then token will only be removed, but not added. If set to true, then token will only be added, but not removed.

A boolean value, true or false, indicating whether token is in the list after the call or not.

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:

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);