Problem Statement
What is the classList property used for?
Explanation
The classList property provides methods to add, remove, toggle, and check CSS classes on elements.
Add method adds one or more classes. Remove method removes classes. Toggle adds class if absent, removes if present. Contains checks if class exists.
ClassList is better than className because it does not replace all classes. It works with multiple classes easily. It provides convenient methods.
ClassName is a string of all classes, harder to manipulate. ClassList is a DOMTokenList with helpful methods.
Using classList is the modern, recommended way to manage CSS classes.
Understanding classList is essential for dynamic styling in JavaScript.
Code Solution
SolutionRead Only
const element = document.getElementById('myElement');
// ADD classes
element.classList.add('active');
element.classList.add('highlight', 'special'); // Multiple at once
// REMOVE classes
element.classList.remove('active');
element.classList.remove('highlight', 'special');
// TOGGLE - add if absent, remove if present
element.classList.toggle('active'); // Adds
element.classList.toggle('active'); // Removes
// Toggle with condition
const isActive = true;
element.classList.toggle('active', isActive); // Adds if isActive is true
// CHECK if class exists
if (element.classList.contains('active')) {
console.log('Element is active');
}
// REPLACE class
element.classList.replace('old-class', 'new-class');
// GET all classes as array
const classes = [...element.classList];
console.log(classes); // ['class1', 'class2']
// ITERATE over classes
element.classList.forEach(className => {
console.log(className);
});
// LENGTH
console.log(element.classList.length); // Number of classes
// ITEM - get class by index
console.log(element.classList.item(0)); // First class
// COMPARE WITH className
// Using className (old way, harder)
element.className = 'class1 class2'; // Replaces all classes
if (element.className.includes('active')) {
// Not reliable if 'active-button' exists
}
element.className += ' new-class'; // Add (awkward)
element.className = element.className.replace('old', 'new'); // Replace
// Using classList (modern, easier)
element.classList.add('new-class');
element.classList.replace('old', 'new');
// PRACTICAL EXAMPLES
// Toggle menu
const menuBtn = document.getElementById('menuBtn');
const menu = document.getElementById('menu');
menuBtn.addEventListener('click', () => {
menu.classList.toggle('open');
});
// Active tab
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Remove active from all
tabs.forEach(t => t.classList.remove('active'));
// Add to clicked
tab.classList.add('active');
});
});
// Dark mode toggle
const toggleBtn = document.getElementById('darkModeToggle');
toggleBtn.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
// Update button text
const isDark = document.body.classList.contains('dark-mode');
toggleBtn.textContent = isDark ? 'Light Mode' : 'Dark Mode';
});
// Loading state
const button = document.getElementById('submitBtn');
button.addEventListener('click', async () => {
button.classList.add('loading');
button.disabled = true;
await fetchData(); // Async operation
button.classList.remove('loading');
button.disabled = false;
});
// Highlight on scroll
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('section');
sections.forEach(section => {
const top = section.offsetTop;
const height = section.offsetHeight;
if (window.scrollY >= top - 100 && window.scrollY < top + height) {
section.classList.add('active');
} else {
section.classList.remove('active');
}
});
});