In this example you will learn how to change the CSS class on HTML body element using jquery. I will assume that you know how to create a CSS class. Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. I have used removeClass (“ClassName”) and addClass (“ClassName”). In this example, when you click on button jquery removeClass method will remove the current class on the body element and add the new multiple classes on the body element
Here's a simple solution
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.green
{
background-color: #55f055;
}
.pink
{
background-color: #ff9999;
}
.class1
{
color: #fff;
font-family: Verdana;
font-size: 13px;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btClick").click(function () {
$('body').removeClass('green').addClass('pink class1');
});
});
</script>
</head>
<body class="green">
<form id="form1" runat="server">
<div>
<h2>
How to change the css class on body element</h2>
<input id="btClick" type="button" value="Click" />
</div>
</form>
</body>
</html>
Output
Download
Addclass-and-removeclass on body elemebt.zip (1,003.00 bytes)
See live demo