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

目录

HTML DOMTokenList add()

❮ The DOMTokenList Object

Examples

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 »

Toggle "myStyle" on and off:

const list = element.classList;
list.toggle("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 remove() Method

The toggle() Method

The replace() Method

The forEach() Method

The entries() Method

The keys() Method

The values() Method

The DOMTokenList Object

Syntax

domtokenlist.add(token)

Parameters

Parameter Description
token Required.
The token(s) to add to the list.

Return Value

NONE

More Examples

Add multiple classes to the an element:

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

Get number of class tokens for an element:

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

Get the class tokens of the "myDIV" element:

const list = document.getElementById("myDIV").classList;
Try it Yourself »

Get the first class token of an element:

let className = element.classList.item(0);
Try it Yourself »

Does an an element has a "myStyle" class token?

let x = element.classList.contains("myStyle");
Try it Yourself »

Remove "anotherClass" if an element has a "myStyle" class token.

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}
Try it Yourself »

Browser Support

domtokenlist.add() 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.add() is not supported in Internet Explorer 11 (or earlier).

❮ The DOMTokenList Object