HTML DOM className Property

Last Updated : 19 Aug, 2026

In the HTML document, the className property is used to set or return the value of an element’s class attribute. Using this property, the user can change the class of an element to the desired class. 

Syntax

  • returns the className property
HTMLElementObject.className;
  • sets the className property
HTMLElementObject.className = class;

The className specifies the class name of an element. To apply multiple classes, separate them using spaces. As an example, if an element has two classes then we specify them as "classname1 classname2" where classname1 and classname2 are the names of two different classes. The className property returns a string or a space-separated list of classes of an element. 

Example 1: This example set the class for <div> element. 

html 
<!--Driver Code Starts-->

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | DOM className Property
    </title>
    <style>
        .do_style {
            width: 600px;
            height: 100px;
            background-color: lightgreen;
            text-align: center;
            font-size: 25px;
            color: green;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <p>Click the button to set a class for div.</p>
    <div id="div1">
        GeeksforGeeks
    </div>
<!--Driver Code Ends-->

    <button onclick="myFunction()">Try it</button>
    <script>
        function myFunction() {
            document.getElementById("div1").className =
                "do_style";
        }
    </script>

<!--Driver Code Starts-->
</body>

</html>

<!--Driver Code Ends-->

Explanation: The class for < div> element is assigned a value using className property.

Example 2: This example get the classes of < div> element. 

html 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>HTML DOM className Property</title>
    <style>
        .do_style {
            width: 600px;
            height: 100px;
            background-color: lightgreen;
            text-align: center;
            font-size: 25px;
            color: green;
            line-height: 100px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h2>HTML DOM className Property</h2>
    <p>Click the button to assign the <code>do_style</code> class to the div element.</p>
    <div id="div1">
        GeeksforGeeks
    </div>
<!--Driver Code Ends-->

    <button onclick="myFunction()">Assign Class</button>
    <script>
        function myFunction() {
            document.getElementById("div1").className = "do_style";
        }
    </script>

<!--Driver Code Starts-->
</body>

</html>
<!--Driver Code Ends-->

Example 3: This example overwrites the existing class names. 

html 
<!--Driver Code Starts-->

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | DOM className Property
    </title>
    <style>
        .oldstyle {
            width: 300px;
            height: 50px;
            background-color: lightgreen;
            color: green;
            margin-bottom: 10px;
        }
        .newstyle {
            width: 400px;
            height: 100px;
            background-color: white;
            text-align: center;
            font-size: 25px;
            color: green;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <p>
      Click the button to change the value of the
      class attribute of div to "newstyle".
    </p>
    <div id="div1" class="oldstyle">
        GeeksforGeeks
    </div>
<!--Driver Code Ends-->

    <button onclick="myFunction()">
        Try it
    </button>
    <script>
        function myFunction() {
            document.getElementById("div1").className =
                "newstyle";
        }
    </script>

<!--Driver Code Starts-->
</body>

</html>

<!--Driver Code Ends-->
  • element.className returns (or accepts) a space-separated string of all class names on the element. Setting it completely replaces the existing classes.
  • The property is called className (not class) because class is a reserved keyword in many programming languages that interact with the DOM. Note that the corresponding HTML attribute is still written as class.
Comment

Explore