Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML | DOM className Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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>

Output: Before Click on The Button:

Initially

After Click on The Button:

After pressing try it

Supported Browsers:

  • Google Chrome 22 and above
  • Edge 12 and above
  • Internet Explorer 5 and above
  • Firefox 1 and above
  • Opera 8 and above
  • Safari 1 and above

My Personal Notes arrow_drop_up
Last Updated : 12 Aug, 2022
Like Article
Save Article
Similar Reads
Related Tutorials