element.classList Class list operations
Last updated: 2026-09-09
element.classList Class list operations
classList provides add/remove/toggle/contains for CSS classes.
| Category | DOM |
|---|---|
| ES version | DOM |
📝 Syntax
el.classList.add('active');Returns：A DOMTokenList object.
Mutates the original：Yes (in place)
▶ Example
Edit the code, press Run, and see the result in the output panel:
Output：
true💡 Tip classList.toggle is the standard show/hide pattern.
ℹ️ info classList replaces legacy className string manipulation.
🌐 Browser support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| element.classList | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported by all modern browsers | |||||
🏷️ Related Items
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
❓ FAQ
QclassList vs className?
AclassList has methods; className sets the whole string.
QWhat does toggle return?
Atrue if added, false if removed.
QCan classList add multiple?
AYes — add('a', 'b', 'c').
