How to Change Element Class with JavaScript

The class attribute can be used by JavaScript (via the HTML DOM) to modify HTML elements with a defined class. The specified class can be changed in different ways. Here are the most common methods for changing classes in DOM elements:

.className method

The .className property sets or returns the value of the specified element's class attribute.

  • To return the .className property use the following syntax:
HTMLElementObject.className
  • To set the .className property use the following syntax:
HTMLElementObject.className = class

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .style {
      width: 150px;
      height: 50px;
      background-color:#1c87c9;
      text-align: center;
      font-size: 20px;
      Color: #e6ebef;
      margin-bottom: 10px;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to set a class for the div.</p>
    <div id="Div">
      I am a Div element
    </div>
    <button onclick="myFunction()">Click</button>
    <script>
      function myFunction() {
          document.getElementById("Div").className = "style";
      }
    </script>
  </body>
</html>

.classList method

The .classList is a read-only property which returns the class name(s) of an element as a DOMTokenList object. This method also includes other methods. See them below:

  • add (class1, class2, ...)

This method adds a class value to an element’s list of classes. If the class already exists, it will not add the class again.

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .class1 {
      width: 200px;
      height: 50px;
      background-color: #1c87c9;
      color: #e6ebef;
      font-size: 25px;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to add the "class1" class to Div.</p>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>
    <div id="myDiv">
      I am a Div element.
    </div>
    <script>
      function myFunction() {
          document.getElementById("myDiv").classList.add("class1");
      }
    </script>
  </body>
</html>

remove (class1, class2, ...)

This method removes a class value from an element’s list of classes. If the class does not exist, it will not throw an error.

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .class1 {
      width: 300px;
      height: 50px;
      background-color: #1c87c9;
      color: #e6ebef;
      font-size: 25px;
      text-align: center;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to remove the "class1" class from the Div.</p>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>
    <div id="myDiv" class="class1">
      I am a Div element.
    </div>
    <script>
      function myFunction() {
          document.getElementById("myDiv").classList.remove("class1");
      }
    </script>
  </body>
</html>

item(index)

This method returns a class value by index number from an element. Index starts at 0 and returns null if the index is out of range.

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .Class1 {
      width: 500px;
      height: 30px;
      }
      .Class2 {
      background-color: lightblue;
      }
      .Class3 {
      text-align: center;
      font-size: 25px;
      color: black;
      margin-bottom: 10px;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to display the class name of the first class (index 0) of div.</p>
    <div id="myDiv" class="Class1 Class2 Class3">
      I am a Div element with three classes.
    </div>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>
    <p id="demo"></p>
    <script>
      function myFunction() {
          var x = document.getElementById("myDiv").classList.item(0);
          document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
</html>

toggle(class, true|false)

This method toggles the existence of a class value in an element’s list of classes. When only one parameter is present, and the class exists, it removes the specified class from an element and returns false. And if the class does not exist, it is added to the element and returns true.

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .Class1 {
      width: 150px;
      height: 50px;
      background-color: #1c87c9;
      color: #e6ebef;
      font-size: 25px;
      padding: 5px;
      }
      .Class2 {
      width: 300px;
      height: 100px;
      background-color: #8ebf42;
      text-align: center;
      font-size: 25px;
      color:  #eee;
      margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to toggle between two classes.</p>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>
    <div id="myDiv" class="Class1">
      I am a Div element.
    </div>
    <script>
      function myFunction() {
          document.getElementById("myDiv").classList.toggle("Class2");
      }
    </script>
  </body>
</html>

contains(class)

This method checks whether an element has the specified class name. Possible values: true; false.

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .Class1 {
      width: 500px;
      height: 50px;
      border: 1px solid black;
      }
      .Class2 {
      background-color: #eee;
      padding: 25px;
      }
      .Class3 {
      text-align: center;
      font-size: 25px;
      color: #1c87c9;
      margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to find out if the Div element has a class of "Class1".</p>
    <div id="myDiv" class="Class1 Class2 Class3">
      I am a Div element
    </div>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>
    <p id="demo"></p>
    <script>
      function myFunction() {
          var x = document.getElementById("myDiv").classList.contains("Class1");
          document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
</html>

replace(oldClass, newClass)

This method replaces an existing class with a new class.

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .oldClass {
      width: 150px;
      height: 50px;
      background-color: #1c87c9;
      color: #e6ebef;
      font-size: 25px;
      padding: 5px;
      }
      .newClass {
      width: 300px;
      height: 100px;
      background-color: #8ebf42;
      text-align: center;
      font-size: 25px;
      color:  #eee;
      margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to replace the class.</p>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>
    <div id="myDiv" class="oldClass">
      I am a Div element.
    </div>
    <script>
      function myFunction() {
          var x = document.getElementById("myDiv");
          x.classList.replace("oldClass", "newClass");
      }
    </script>
  </body>
</html>

Do you find this helpful?

Related articles