The className
property sets or gets the
class name for class attribute of an element.
Return the className property:
HTMLElementObject.className
Set the className property:
HTMLElementObject.className=class
Value | Description |
---|---|
class | Specifies the class name of an element. To apply multiple classes, separate them with spaces, like 'class1 class2' |
A String, representing the class, or a space-separated list of classes.
className |
Yes | Yes | Yes | Yes | Yes |
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:
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:
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:
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:
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>