Skip to content
Fix Code Error

How to add a class to a given element?

March 13, 2021 by Code Error
Posted By: Blankman

I have an element that already has a class:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Now, I want to create a JavaScript function that will add a class to the div (not replace, but add).

How can I do that?

Solution

If you’re only targeting modern browsers:

Use element.classList.add to add a class:

element.classList.add("my-class");

And element.classList.remove to remove a class:

element.classList.remove("my-class");

If you need to support Internet Explorer 9 or lower:

Add a space plus the name of your new class to the className property of the element. First, put an id on the element so you can easily get a reference.

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

Then

var d = document.getElementById("div1");
d.className += " otherclass";

Note the space before otherclass. It’s important to include the space otherwise it compromises existing classes that come before it in the class list.

See also element.className on MDN.

Answered By: Ishmael

Related Articles

  • What does do?
  • TailwindCSS in Next.JS not rendering properly in Webkit
  • How can I resolve Web Component Testing error?
  • How do I style a dropdown with only CSS?
  • After a little scroll, the sticky navbar just is not fixed…
  • state data can not be set using useState in reactjs
  • error LNK2005: ✘✘✘ already defined in…
  • Running Internet Explorer 6, Internet Explorer 7, and…
  • Bootstrap modal in React.js
  • AppCompat v7 r21 returning error in values.xml?

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How does Access-Control-Allow-Origin header work?

Next Post:

How to create a file in Linux from terminal window?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error