Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

HTML | DOM className Property

  • Last Updated : 25 Jul, 2019

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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 than 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.






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




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




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

    Output:

    Before Click on The Button:


    Initially

    After Click on The Button:


    After pressing try it

    Supported Browsers:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari



    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :