How To Change DIV Class Name In Javascript
In This Javascript Tutorial we will see How To Change DIV Css Class Name In JS Using Netbeans Editor .
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Tutorial: Change Div Class Name</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.DefaultClass{
width: 200px;
height: 200px;
background-color: #000;
margin-bottom: 20px;
}
.class1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.class2{
width: 200px;
height: 200px;
background-color: green;
margin-bottom: 20px;
}
</style>
<script>
function func1()
{
document.getElementById('cls').className = "class1";
}
function func2()
{
document.getElementById('cls').className = "class2";
}
</script>
</head>
<body>
<div class="DefaultClass" id="cls"></div>
<button onclick="func1();">Class 1</button>
<button onclick="func2();">Class 2</button>
</body>
</html>