In
this article, I will explain how to add and remove class using Jquery.
Add Class (Css
Stylesheet):
The addClass ()
method used to add cascading style sheet classes to the element.
$('p').addClass("Backcolor");
Remove Class (Css
Stylesheet):
The removeClass ()
method used to remove cascading style sheet classes to the element.
$('p').removeClass("Yellow");
We can
also add or remove multiple classes for the elements separated by a space in
between them.
$('p').addClass("Backcolor
Fontsize");
$('p').removeClass ("Backcolor
Fontsize");
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
src="jquery-1.10.2.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function () {
$('#btnAddClass').click(function () {
$('p').addClass("Forecolor");
return
false;
});
$('#btnAddMultipleClass').click(function () {
$('p').addClass("Backcolor Fontsize");
return
false;
});
$('#btnRemoveandaddClass').click(function () {
$('p').removeClass("Backcolor Fontsize").addClass("Forecolor");
return
false;
});
});
</script>
<style
type="text/css">
.Backcolor
{
background-color:Orange;
}
.Fontsize
{
font-size:x-large;
}
.Forecolor
{
color:
Green;
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<p>
This is the sample text</p>
<asp:Button ID="btnAddClass" runat="server" Text="Add Class" />
<asp:Button ID="btnAddMultipleClass" runat="server"
Text="Add Multiple
Class" />
<asp:Button ID="btnRemoveandaddClass" runat="server"
Text="Remove
Class" />
</div>
</form>
</body>
</html>
0 comments:
Post a Comment