HTML DOM className Property

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

<!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> 

    <button onclick="myFunction()">Try it</button> 

    <script> 

        function myFunction() { 

            document.getElementById("div1").className = 

                "do_style"; 

        } 

    </script> 

</body> 

</html>

Output: Before Click on The Button:

Initially

After Click on The Button:

After clicking try it button

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

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

html

<!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> 

    <button onclick="myFunction()">Try it</button> 

    <script> 

        function myFunction() { 

            document.getElementById("div1").className = 

                "do_style"; 

        } 

    </script> 

</body> 

</html>

Output: Before Click on The Button:

Initially

After Click on The Button:

After pressing try it button

Example-3: This example overwrites the existing class names.

html

<!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> 

    <button onclick="myFunction()"> 

        Try it 

    </button> 

    <script> 

        function myFunction() { 

            document.getElementById("div1").className = 

                "newstyle"; 

        } 

    </script> 

</body> 

</html>