attribute of an element allows you to apply different styles and manipulate the appearance of the page on the
fly. This can be useful for things like toggling styles or applying dynamic animations.
Adding Class Using the classList Property
available on all HTMLElement objects. The classList property is an instance of the DOMTokenList
interface, which provides methods like add(), remove() and
toggle() to interact with the class attribute of an element.
To add a class, simply call the add() method on the classList property and pass the class name
as its argument. Here’s an example:
const element = document.getElementById("my-element"); element.classList.add("new-class");
Adding Multiple Classes at Once
You can also add multiple classes at once by passing them as separate arguments to the add()
method like this:
const element = document.getElementById("my-element"); element.classList.add("class-one", "class-two", "class-three");
Adding Class Using className Property
Another approach to add a class to an element is by using the className property. The
className property represents the class attribute of an element as a string. To add a class, you can simply
append the class name to the existing value of the className property:
const element = document.getElementById("my-element"); element.className += " new-class";
When using the className property, make sure to add a space before the class name to separate it from the
existing class names. Otherwise, the new class name will be merged with the existing class name.
classList and className properties. The classList property is generally the preferred approach due to its
simplicity and versatility. However, it’s good to know both methods as they can be useful in different