Adding & Removing CSS Classes With Vanilla Javascript

javascript
Published on March 30, 2019

jQuery's addClass & removeClass makes it very simple to add and remove CSS classes. But it is equally straightforward with native Javascript also.

Each DOM element has a classList property which is basically the entry point for getting and setting CSS classes for the element.

var classes = document.querySelector("#container").classList;

Adding a CSS Class

CSS classes can be added with the add method of the classList property. This is ignored if the class is already existing.

document.querySelector("#container").classList.add('post-image');

Multiple CSS classes can be added by passing in multiple parameters :

// add class "post" & "post-image" to #container
document.querySelector("#container").classList.add('post', 'post-image');

Removing a CSS Class

CSS classes can be removed with the remove method of classList. If the class does not exist, it is ignored. Multiple classes can also be removed.

document.querySelector("#container").classList.remove('post-image');
// remove class "post" & "post-image" from #container
document.querySelector("#container").classList.remove('post', 'post-image');

Finding if Class Present

The contains method will tell whether the element contains the given class or not.

if(document.querySelector("#container").classList.contains('post-image'))
    console.log('Class present');
else
    console.log('Class not present');

Toggling a CSS Class

Sometimes rather than to first check for a class and then adding or removing it, it is easier to toggle the class. If the class exists, then it is removed. If the class does not exist, it is added.

Toggling can be performed with the toggle method. This methods accepts 2 parameters:

  1. The CSS class to add or remove
  2. An optional force argument — which can either be true or false
    When set to true, then add the class — which becomes similar to the add method.
    When set to false, then remove the class — similar to the remove method. 
// If class "post-image" exists then remove it. Else add this class
document.querySelector("#container").classList.toggle('post-image');

// If class "post-image" does not exist then add it. Else do nothing
document.querySelector("#container").classList.toggle('post-image', true);

// If class "post-image" exists then remove it. Else do nothing
document.querySelector("#container").classList.toggle('post-image', false);

The toggle method also returns a boolean value which can be useful to find out what kind of operation was performed. When toggle method returns true then the class was added. If it returns false then the class was removed.

var class_added = document.querySelector("#container").classList.toggle('post-image');
if(class_added == true)
    console.log('Class was added');
else
    console.log('Class was removed');

Replacing a CSS Class with Another Class

The replace method replaces an existing class with a new class. This is better way than first removing a class and then adding a class.

Obviously if the old class is not existing, then the new class is also not added.

// If class "post" exists then remove it and add class "new-post"
document.querySelector("#container").classList.replace('post', 'new-post');

The first parameter of replace is the existing class that you are looking to replace. The second parameter is the new class that you are looking to add.

Useful Resources

In this Tutorial