In web development, manipulating CSS classes is a common and necessary task to achieve the desired appearance on our sites. JavaScript offers us a simple and powerful way to manipulate these classes using the classList API.
The JavaScript classList API
The classList API is an interface that allows us to manipulate the CSS classes of an element in a more efficient and readable way compared to using the class attribute. This API provides methods that make it easy to add, remove, and check classes on an element.
To access the classList API of an element, we use the classList property. For example:
const element = document.getElementById("my-item"); const classList = element.classList;
Now that we have access to the classList API, we can manipulate the element's classes in several ways.
Add a class to an element
To add a class to an element, we use the add method of the classList API. For example:
const element = document.getElementById("my-item"); element.classList.add("new-class");
With this, the "new-class" class will be added to the element, allowing the corresponding styles defined in our CSS style sheet to be applied.
Delete a class from an element
If we want to remove a class from an element, we use the remove method of the classList API. For example:
const element = document.getElementById("my-item"); element.classList.remove("class-to-remove");
Calling this method will remove the element's "class-to-remove" class, reverting the styles associated with that class.
Check if an element has a class
If we want to check if an element has a specific class, we can use the contains method of the classList API. This method returns a boolean value indicating whether the element has the specified class. For example:
const element = document.getElementById("my-item"); const hasClass = element.classList.contains("class-to-verify"); if (hasClass) { console.log("The element has the class"); } else { console.log("The element does not have the class"); }
This can be useful for performing conditional actions based on the presence or absence of a class on an element.
Manipulating CSS classes using the JavaScript classList API gives us a powerful and efficient solution to modify the appearance and visual behavior of our elements on the web. Its use is especially useful when we need to make dynamic changes to the classes of an element during the execution of our code.
Javascript in Spanish
At NelkoDev, we provide educational content and resources in Spanish about JavaScript and other programming technologies. If you are interested in learning more about JavaScript, we invite you to explore our website, where you will find tutorials, guides, and code examples to help you improve your programming skills.
Don't hesitate to contact us if you have any questions or need help with your projects. We are available through our contact form at https://nelkodev.com/contacto. In addition, we invite you to visit our portfolio of projects in https://nelkodev.com/portfolio to see some of our previous work.
Frequently asked questions
What is the difference between using the classList API and the class attribute?
The classList API provides more intuitive and efficient methods for manipulating an element's CSS classes. On the other hand, the class attribute is a text string that encompasses all the classes assigned to an element in the form of a space-separated list.
Can I add multiple classes at the same time using the classList API?
Yes, you can add multiple classes at the same time using the add method of the classList API. You only need to separate the classes with commas when passing them as an argument. For example: element.classList.add("class1", "class2", "class3").
Are whitespace allowed in class names?
Yes, whitespace is allowed in class names. However, it is good practice to avoid using whitespace and instead use hyphens or camelCase to separate words in class names.
Can I manipulate element classes that don't already exist in the DOM?
No, to manipulate classes of elements, they must exist in the DOM. If you are adding elements dynamically, you must ensure that they have been added to the DOM before manipulating their classes using the classList API.
I hope this article helped you understand how to manipulate CSS classes in JavaScript using the classList API. If you have any other questions, feel free to leave them in the comments.
English 
Spanish