Jquery addClass/removeClass

The both addClass and removeClass functions used to add new class and remove existing class of any html element. You can see the demo of this function below.

Syntax:

.addClass( [ className ] )
.removeClass( [ className ] )

See below example, which should make the working of addClass, removeClass more clear.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>jQuery examples</title>
<script language="javascript" src="js/jquery-1.4.1.js"></script>
<script language="javascript">
$(document).ready(function(){ // this for document in ready state
$('#add_remove').addClass("addstyle");

$('#add_remove').mouseover(function() {
$(this).removeClass("addstyle").addClass("removestyle");
});

$('#add_remove').mouseout(function() {
$(this).removeClass("removestyle").addClass("addstyle");
});
});
</script>
<style type="text/css">
.addstyle{
font-weight:bold;
}
.removestyle{
font-style:italic;
}
</style>
</head>

<body>
<div id="add_remove">Learn Web development</div>
</body>
</html>

In the above example, the functions triggered on mouseover and mouseout event. At default on page load it shows ‘Learn Web development’ in web page with bold. See when you mouseover the html element Learn Web development it remove the default class ‘addstyle’ and add the new class ‘removestyle’ to that element. And after mouseout on that element it remove the added class and add default class.

Demo:

Learn Web development
Posted in jQuery