How to change the class name of a DIV using JavaScript

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to change the class name of a DIV using JavaScript
With JavaScript, you can change the elements in your pages as the user interacts with them. (Burke/Triolo Productions/Brand X Pictures/Getty Images)

With JavaScript in your Web pages, you can manipulate elements such as divs, changing attributes as the user interacts with the page content. Changing the class name of an element requires only a few lines of code added to the page markup. You can change the entire class name, replacing it with a new one, or can add a new class name to any existing class attributes, since elements can belong to more than one class. This allows you to alter the function and appearance of your page elements, potentially making them more interactive and visually engaging.

Skill level:
Moderately Easy

Other People Are Reading


  1. 1

    Give your div element an ID attribute. Open the file with your HTML markup code in it and locate the div you wish to manipulate. If it does not already have one, give the div element an ID attribute value as in the following example: <div id="niceDiv" class="content">Here is some content.</div>

    You can use the ID attribute to identify the div in JavaScript. For demonstration, this div has an initial class attribute, but this is not necessary.

  2. 2

    Add a function to your page. In the head section of the page, include a script section if you do not already have one: <script type="text/javascript">


    Inside the script section, add a function outline as follows: function changeClass(elem){


    This function is set to receive a parameter representing the ID of the div to change, but you can omit the parameter if you prefer to include the ID directly when you change the element class name: function changeClass(){


  3. 3

    Call the function from within your page. Where you call the function depends on when you want the class name to change. The following extended div code demonstrates calling the function when the user rolls over the element: <div id="niceDiv" class="content" onmouseover="changeClass(">Here is some content.</div>

    In this case the element passes its own ID attribute as parameter to the method, but you can remove the parameter from the brackets if you chose not to include a parameter in your function outline: <div id="niceDiv" class="content" onmouseover="changeClass()">Here is some content.</div>

  4. 4

    Change the element class name. Inside your JavaScript function, first retrieve a reference to the div element using its ID attribute: var theElem = document.getElementById(elem);

    If you did not use a parameter with your function, include the element ID as a string instead: var theElem = document.getElementById("niceDiv");

    To completely replace the existing class name with a new one, use the following syntax: theElem.className="content_new";

    This will work whether the element already has a class name or not. To add a new class name to any existing names, use the following: theElem.className+=" content_new";

    This will retain the existing names as well as adding a new one. Alter the new class name strings to reflect the name you want to give the div.

Tips and warnings

  • You can access advanced class name manipulation without having to implement the details if you use jQuery.
  • If you are replacing the existing element class name with a new one, make sure you do not have any styling or functions you want to retain and that are reliant on the existing class name.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.