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>