Javascript Reference - HTML DOM className Property








The className property sets or gets the class name for class attribute of an element.

Syntax

Return the className property:

HTMLElementObject.className

Set the className property:

HTMLElementObject.className=class

Property Values

Value Description
class Specifies the class name of an element. To apply multiple classes, separate them with spaces, like 'class1 class2'

Return Value

A String, representing the class, or a space-separated list of classes.





Browser Support

className Yes Yes Yes Yes Yes

Example

The following code shows how to set the class for a <div> element.


<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {<!--from  ww w.ja  va  2  s .c om-->
    width: 300px;
    height: 100px;
    background-color: red;
    text-align: center;
    font-size: 25px;
    color: white;
    margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="myDIV">I am a DIV element</div>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDIV").className = "mystyle";
}
</script>
</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to get the class name of the first <div> element in the document.


<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {<!--from  www . j  a  v a 2 s. c  o m-->
    width: 300px;
    height: 100px;
    background-color: red;
    color: white;
    margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="mystyle">I am a DIV element</div>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementsByTagName("DIV")[0].className;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the class name of an element.


<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {<!-- w w w.  j ava 2  s .  co m-->
    width: 300px;
    height: 100px;
    background-color: coral;
    color: white;
    margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="myDIV" class="mystyle">I am a DIV element.</div>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementsByClassName("mystyle")[0].className;
    var y = document.getElementById("myDIV").className;
    document.getElementById("demo").innerHTML = x + "<br/>" + y;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to get the class names of an element with multiple classes.


<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {<!--from   w ww  .  j a  v  a 2  s.  c  o m-->
    width: 500px;
    height: 50px;
}
.test {
    background-color: red;
}
.example {
    text-align: center;
    font-size: 25px;
    color: black;
    margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="myDIV" class="mystyle test example">I am a DIV element</div>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myDIV").className;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 5

The following code defines style for a paragraph under p.newclass in the style section. Then it sets the class name for a paragraph in Javascript code. In this way we can change or add style for a HTML element.

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
        p { <!-- www . ja v  a 2s.  c o m-->
            border: medium double black; 
        } 
        p.newclass { 
            background-color: grey; 
            color: white; 
        } 
    </style> 
</head> 
<body> 
    <p id="textblock" class="Survey numbers"> 
        This is a test. This is a test.
        This is a test. This is a test.
        This is a test. This is a test.
    </p> 
    <button id="pressme">Press Me</button> 
    <script> 
      document.getElementById("pressme").onclick = function(e) { 
          document.getElementById("textblock").className += " newclass"; 
      }; 
    </script> 
</body> 
</html>

Click to view the demo