The Web Developer Bootcamp 2024

Colt Steele

Back to DOM Index Page

classList

classList is a method we use to modify an HTML Element by adding or removing one or more classes. We are not creating or deleting classes, we are simply enabling an element to use, or not to use existing classes.

In order to use classList, either the external style sheet or the internal styles (in the page < head> section) must exist, and if you are using an external style sheet, you must have the reference to this stylesheet in the < head> section of the HTML.

To start, we have the following two classes defined in the < head> section of this page. They are as follows:

  • .purple {
    • color: purple;
  • }
  • .border {
    • border: 2px solid green;
  • }
.purple will obviously change the text color of an element to purple and .border will add a 2px, solid, green border to an element. These styles have NOT been applied to any element.

We'll define an h5 element to work with

  • < h5>This is my Heading 5< /h5>     which will produce:
  • This is my Heading 5
which has no styles associated with it.

We can verify there are no styles associated with our h5 by using getAttribute():

  • const h5 = document.querySelector('h5');   // assigns the first (& only) h5 to a variable
  • h5.getAttribute('class');   // returns any classes associated with this element
  • returns null>   // because this element has no class assigned

Now we could use setAttribute() to assign a class to the element, but we could only use this method to assign one single class. If we used setAttribute() a second time, it would just overwrite the previous class we had already set.

*note: you could actually set multiple classes with setAttribute() using string literals:

  • const h5.document.querySelector('h5');   // assign h5 to a variable called h5
  • h5.setAttribute('class', purple);   // sets first class to purple
  • let currentClass = h5.getAttribute('class');   // set's current class (purple) to variable currentClass
  • h5.setAttribute('class', `${currentClass} border`);   // uses string literal to assign two classes to h5
or
  • h5.setAttribute('class', `purple border`);   // uses string literal to assign two classes to h5

Woof, what a mess but not to worry, there is a better way.

Adding Classes

By using classList we can list any classes that are applied to an element. In our case it would return "" because we haven't assigned any classes yet. But we can also use classList to ADD or REMOVE classes.

So we have our basic h5

  • This is my Heading 5
First we are going to assign this to a variable head5 to simplify our coding:
  • const head5 = document.querySelector('h5');
and we can add the class "purple" like so:
  • head5.classList.add('purple');   we get:
  • This is my Heading 5
and if we add a second class:
  • head5.classList.add('border');   we get:
  • This is my Heading 5
and if we list the applied classes with classList:
  • head5.classList   // remember, we assigned our h5 to a variable to simplify coding
we would see that there are two classes applied, purple, and border. So using classList is a much better way to add classes to an element than using string literals. Remember that these classes have already be defined before using classList.

Removing Classes

Removing classes is just as easy as adding classes. If we remove the purple:

  • head5.classList.remove('purple');
we would get:
  • This is my Heading 5
So the purple class is gone but the border class remains.

Other Useful classList Methods

There are some other very useful classList methods, we might want to use:

  • contains - - classList.contains('className')
    • does this element contain this class
    • returns true or false
  • toggle - - classList.toggle('className')
    • toggles the specified class on or off
    • returns true or false

Back to Top