The toggle of DOMTokenList for JS if force is not given, "toggles" token, removing it if it’s present and adding it if it’s not present. If force is true, adds token (same as add()). If force is false, removes token (same as remove()).
Returns true if token is now present; otherwise false.
Throws a "SyntaxError" DOMException if token is empty.
Throws an "InvalidCharacterError" DOMException if token contains any spaces.
tokenlist.toggle(token [, force])
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
const token = "myclass4";
tokenlist.toggle(token);
document.querySelector("output").innerHTML = tokenlist;
console.log(tokenlist);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
const token = "myclass4";
const force = false;
tokenlist.toggle(token, force);
document.querySelector("output").innerHTML = tokenlist;
console.log(tokenlist);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
const token = "myclass2";
const force = true;
tokenlist.toggle(token, force);
document.querySelector("output").innerHTML = tokenlist;
console.log(tokenlist);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
const token = "myclass2";
document.querySelector("output").innerHTML = tokenlist.toggle(token);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element class="myclass1 myclass2 myclass3"></my-element>
<output></output>
<script>
const element = document.querySelector("my-element");
const tokenlist = element.classList;
const token = "myclass4";
document.querySelector("output").innerHTML = tokenlist.toggle(token);
</script>
</body>
</html>