DEV Community

Cover image for How to apply CSS class in Javascript?
Duomly
Duomly

Posted on

How to apply CSS class in Javascript?

This post was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-3/#how-to-apply-css-class-in-javascript


DOM manipulation is definitely the skill that you need to have if you’d like to be a successful front-end developer, especially if you’d like to work with UI, as for example, UI developer.

Whole DOM manipulation is a huge topic, and I’ll be showing you the most popular methods in time to time in the Front-End Interview Questions series.

Especially in PART 3, we’ll talk about that even a few times.

Whole DOM manipulation is a kind of resource-hungry stuff, and if you can, you should go forward with the stuff like virtual DOM, but sometimes you need to do it with the normal DOM anyway.

In the previous section, I’ve shown you how you can manipulate with classes by using jQuery, but what if you don’t want to use jQuery in your project, and you need to do it with pure JS?

You need to know how to do it!

Let’s see on the code example.

As the first step, we need to select the element that we’d like to modify.

In this case, I’ve added an id to the element that is kind of comfortable to select, because the method “getElementById” returns only one element.

Next, when we have selected elements, we can use the method “setAttribute” and define attribute type as “class”, the value we can setup however we want.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn coding on Duomly.com</title>
  </head>
  <body>
    <div id="hero">
      This is hero element
    </div>
    <script>
      const hero = document.getElementById("hero");
      hero.setAttribute("class", "rounded");
    </script>
  </body>
</html>

Duomly - Programming Online Courses

Thank you for reading,
Radek from Duomly

Top comments (4)

Collapse
 
pontakornth profile image
Pontakorn Paesaeng

You can also use element.classList too. This includes abilities to toggle, add or remove class.

Collapse
 
alexanderjanke profile image
Alex Janke

For all those poor souls who still have to support IE 11, this has some minor limitations though. You cannot use classList.toggle(). You cannot pass multiple parameters to classList.add() or classList.remove()

caniuse.com/#search=classList

Collapse
 
thinkverse profile image
Kim Hallberg

IE 11 cannot still be popular, can it? I mean it was years ago we saw signs of it dying down, and especially since Microsoft has dropped support for it's older OS's and Edge now being the new default. 🤔

Thread Thread
 
alexanderjanke profile image
Alex Janke

Popular, no. Not at all - I feel like it could die a little faster though, haha. It's only then dead when Microsoft decides to completely remove it from a default win-installation, unfortunately.

Personal experience from my work:
Our work stations have Chrome installed by default. Also, Edge is available. But so is IE11 and most of the older coworkers click it cause "I've always used this one.". I'm also pretty sure that there are quite some old legacy apps in bigger corporations that rely on it. Some (big) companies and or public sectors like I'm working in upgrade reaaaaaaally slowly.