In this article, we are going to explore how to manipulate CSS classes using the Javascript classList API. This feature, which is available in all modern browsers, allows us to make dynamic changes to the classes of HTML elements in a simple and efficient way.
What is Javascript classList API?
The Javascript classList API is an interface that allows you to perform operations on the CSS classes of an HTML element in an easier and safer way. Previously, to add, remove, or modify CSS classes, we had to use the className property, which required manually manipulating and updating the classes' text string.
The classList API offers us several methods to perform these operations in a more intuitive way:
- add(className): Adds a class to the element.
- remove(className)- Removes a class from the element.
- toggle(className): Adds the class if it is not present, or removes it if it is present.
- contains(className)- Returns true if the element has the specified class, or false otherwise.
Manipulating CSS classes with the classList API
To use the classList API, we must first select the HTML element we want to manipulate the classes. This can be done using any of the Javascript select functions, such as document.getElementById o document.querySelector.
Once we have the element selected, we can use the classList API methods to perform the necessary manipulations. For example, if we want to add a class called "featured" to the element, we can do it as follows:
const element = document.getElementById('myElement'); item.classList.add('featured');
Similarly, if we want to remove the "featured" class, we can use the method remove:
item.classList.remove('featured');
We can also use the method toggle To toggle between adding and removing a class:
item.classList.toggle('featured');
Additionally, we can check if an element has a specific class using the method contains:
if (item.classList.contains('featured')) { console.log('Item is featured'); } else { console.log('Element is not highlighted'); }
The classList API in action
Let's now see a practical example of how we can use the classList API to create interactive functionality. Suppose we have a button that, when clicked, changes the background color of an element:
I am an element
In this example, we've added a "highlight" class to the element when the button is clicked, and removed it if it was already present. This allows us to easily toggle the highlighting of the element each time the button is clicked.
Conclusion
The Javascript classList API is a powerful tool that allows us to manipulate CSS classes easily and efficiently. With his methods add, remove, toggle y contains, we can make all the class changes we need in our HTML elements in a safer and more understandable way.
I hope you found this article helpful in understanding how to manipulate CSS classes with the Javascript classList API. If you have any questions or comments, feel free to leave them below. Thank you for reading!
Frequently asked questions
What browsers support the Javascript classList API?
The Javascript classList API is supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer 10 and later.
Can I use the classList API to modify multiple classes at once?
Yes, the classList API allows you to add or remove multiple classes at the same time by separating them with spaces in the method arguments. add y remove. For example, you can use element.classList.add('class1 class2 class3'); to add three classes to an element at the same time.
Is there any limitation on the number of classes I can add or remove with the classList API?
No, there is no limitation on the number of classes you can use with the classList API. You can add or remove as many classes as you need in an HTML element.
Does modifying classes with the classList API affect other CSS styles applied to the element?
No, modifying classes with the classList API does not affect other CSS styles applied to the element, unless those styles are directly related to the classes being added or removed. Therefore, you can make changes to the classes without worrying about affecting other styles on your page.
English 
Spanish