How to Add a class to an Element in TypeScript

# Add a class to an Element in TypeScript

To add a class to an element in TypeScript:

Select the element.
Use the classList.add() method to add a class to the element.
The method adds the provided class to the element if it isn't already present.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="box">Box 1</div>

    <script src="./src/index.ts"></script>
  </body>
</html>

And here is the related TypeScript code.

src/index.ts

Copied!
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  // ✅ Add class
  box.classList.add('bg-yellow');

  // ✅ Remove class
  // box.classList.remove('bg-yellow');
}

add class to element in typescript

The code for this article is available on GitHub

The document.getElementById method returns null if an element with the provided id doesn't exist in the DOM, so we make sure the box variable doesn't store a null value.

We used the classList.add() method to add a class to the element.

If the class is already present on the element, it won't get added twice.

You can pass as many classes to the add() method as necessary.

src/index.ts

Copied!
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  // ✅ Add class
  box.classList.add(
   'bg-yellow',
   'second-class',
   'third-class'
  );

  // ✅ Remove class
  // box.classList.remove('bg-yellow');
}

pass as many classes to add method as necessary

I've also written an article on how to add CSS styles to an element.

# Remove a class from an element in TypeScript

Similarly, if you need to remove one or more classes, you can use the remove() method.

src/index.ts

Copied!
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  // ✅ Add class
  // box.classList.add('bg-yellow', 'second-class', 'third-class');

  // ✅ Remove class
  box.classList.remove('bg-yellow');
}

remove class from element

We then used the classList.remove method to remove the bg-yellow class from the div element.

You can also pass as many classes to the remove() method as necessary.

src/index.ts

Copied!
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  // ✅ Add class
  // box.classList.add('bg-yellow', 'second-class', 'third-class');

  // ✅ Remove class
  box.classList.remove(
    'bg-yellow',
    'second-class',
    'third-class'
  );
}

The code for this article is available on GitHub

If any of the classes aren't present on the element they get ignored by the remove() method and no error is raised.

If you need to show/hide an element in TypeScript, check out the following article.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Add a class to an Element in TypeScript

# Add a class to an Element in TypeScript

# Remove a class from an element in TypeScript

# Additional Resources

Borislav Hadzhiev