JavaScript DOM Adding, removing, and toggling classes (classList
The classList property in JavaScript provides a convenient way to manipulate an element’s class attribute. It allows you to add, remove, and toggle classes on elements without directly manipulating the className property. This approach is often cleaner and more efficient for managing CSS classes.
classList Property
The classList property returns a DOMTokenList representing the class names of an element. It provides methods for adding, removing, and toggling classes.
Adding a Class
Method: add()
Syntax:
element.classList.add(className);Parameters:
className: A string representing the name of the class to be added.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<div id="myDiv">Content</div>
<button onclick="addClass()">Add Highlight</button>
<script>
function addClass() {
const div = document.getElementById('myDiv');
div.classList.add('highlight');
}
</script>
</body>
</html>
Clicking the button adds the highlight class to the <div>, changing its background color.
Removing a Class
Method: remove()
Syntax:
element.classList.remove(className);Parameters:
className: A string representing the name of the class to be removed.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<div id="myDiv" class="highlight">Content</div>
<button onclick="removeClass()">Remove Highlight</button>
<script>
function removeClass() {
const div = document.getElementById('myDiv');
div.classList.remove('highlight');
}
</script>
</body>
</html>
Clicking the button removes the highlight class from the <div>, reverting its background color.
Toggling a Class
Method: toggle()
Syntax:
element.classList.toggle(className, [force]);Parameters:
className: A string representing the name of the class to be toggled.force(Optional): A boolean indicating whether to add (true) or remove (false) the class. If omitted, the class is toggled (added if it is not present, removed if it is).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<div id="myDiv">Content</div>
<button onclick="toggleClass()">Toggle Highlight</button>
<script>
function toggleClass() {
const div = document.getElementById('myDiv');
div.classList.toggle('highlight');
}
</script>
</body>
</html>
Clicking the button toggles the highlight class on the <div>. If the class is present, it is removed; if it is absent, it is added.
Additional Methods
contains(): Checks if the element has a specific class.const hasClass = element.classList.contains('className');replace(): Replaces an existing class with a new one.element.classList.replace('oldClass', 'newClass');
Considerations
Avoid Direct Manipulation: Using
classListmethods is preferred over directly manipulating theclassNameproperty becauseclassListmethods handle multiple classes more effectively and avoid overwriting existing class names.Multiple Classes: You can add, remove, or toggle multiple classes at once by passing multiple class names to
add(),remove(), ortoggle().element.classList.add('class1', 'class2');Class List State: Using
classListdoes not affect non-class-based styles or inline styles directly.
Best Practices
- Use
classListfor Class Manipulation: It provides a clean and effective way to manage classes compared to directly modifying theclassNameproperty. - Combine with CSS: Use
classListmethods to apply predefined styles from CSS classes for a more modular and maintainable approach to styling.