Introduction to HTML Attribute classList: Becoming the Wizard of Element Classes

classList

classList is a newly introduced attribute in HTML5 that returns the DOMTokenList of a DOM element. It’s a read-only list that contains all the classes of an element.

Let’s give it a try! Suppose we have a div element with three classes: “apple,” “pen,” and “pineapple.”

<div id="testDiv" class=" apple pen pineapple">
  classList test
</div>

⬆️You can see that it has printed out the three classes. Now, let’s move on to discuss how to manipulate these classes.

Supported Methods

The classList attribute offers several functions for manipulating the class list. These include:

• add: Adds a new class.
• remove: Removes a class.
• replace: Replaces a class with another.
• toggle: Toggles a class – removes it if present, adds it if absent.

// Continuing from the example above
tarDiv.classList.add('orange')   // Add a new class - orange
tarDiv.classList.remove('apple') // Remove apple
tarDiv.classList.replace('pen','pencil') // Replace with pencil
tarDiv.classList.toggle('pineapple')     // Toggle - remove if present

Everyone can follow the instructions and try to imagine how the results should look like.

⬇ Print the results step by step and see if they match your expectations.

There are also functions for checking:

• contains: Returns a boolean indicating whether a specific class is present.

tarDiv.classList.contains('apple')

Multiple Parameters – Handling Multiple Classes and Forcing

Both add and remove can accept multiple class names for operation, separated by commas.

tarDiv.classList.add('orange', 'melon') 
tarDiv.classList.add('apple', 'pen') 

toggle also accepts a second parameter – force, which is a boolean value.

As the name suggests, when force is set to true, the operation will be enforced regardless of whether the class exists or not. When set to false, it behaves in the opposite way – classes will always be removed.

// Forcefully adding a class
tarDiv.classList.toggle('apple', true); // Adding the 'apple' class back, even if it already exists

// Forcefully removing a class
tarDiv.classList.toggle('apple', false); // Removing the 'apple' class, even if it doesn't exist anymore

Conclusion

In conclusion, the classList attribute in HTML5 provides a convenient way to interact with an element’s classes.

You can easily manipulate classes and make dynamic changes to your webpage’s styling and behavior.

🧡 Hopefully, this post has helped you to some extent.

🧡You can support me by clicking some ad, Thanks a lot

✅If you got any problem about the explanation, please feel free to let me know

Some Random notes