Introduction:
Here I will explain how to add css class to div using JQuery or remove css class from div element using JQuery in asp.net.
Description:
In previous posts I explained jQuery Higlight selected Gridview row when checkbox selected, jQuery slideUp slideDown slideToggle effects, jQuery fadein fadeout fadeto div example, Best jQuery Drag and Drop Plugins and many articles relating to JQuery. Now I will explain how to add css class or remove css class from div element using JQuery.
In previous posts I explained jQuery Higlight selected Gridview row when checkbox selected, jQuery slideUp slideDown slideToggle effects, jQuery fadein fadeout fadeto div example, Best jQuery Drag and Drop Plugins and many articles relating to JQuery. Now I will explain how to add css class or remove css class from div element using JQuery.
To
implement add css class to div or remove css class from div functionality in JavaScript we need to write
much code but in JQuery we can achieve this
functionality just by simple properties addClass
and removeClass that would be like
as shown below
<script type="text/javascript">
$('#btnAddCSS').click(function() {
$('#samplediv').addClass('sampleCSS')
})
$('#btnRemoveCSS').click(function() {
$('#samplediv').removeClass('sampleCSS')
})
</script>
|
If
you want check this code in sample check below code
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Add or Remove CSS Class from div element</title>
<style type="text/css">
.sampleCSS{
padding: 0.5em;
background:#EB5E00;
color:#fff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
</head>
<body>
<form id="form1"
runat="server">
<input type="button" id="btnAddCSS" value="Add CSSClass"/>
<input type="button" id="btnRemoveCSS" value="Remove CSSClass" />
<div id="samplediv"
style="width:350px">
Aspdotnet-Suresh offers Asp.net,C#.net,SQL
Server,Web Services,WCF,WPF,MVC,Crystal
Reports,AJAX,XML,JavaScript,JQuery,Gridview articles, samples and
tutorials,code examples of asp.net 2.0,3.0,3.5,4.0 and Articles,examples of
.net technologies
</div>
<script type="text/javascript">
$('#btnAddCSS').click(function() {
$('#samplediv').addClass('sampleCSS')
})
$('#btnRemoveCSS').click(function() {
$('#samplediv').removeClass('sampleCSS')
})
</script>
</form>
</body>
</html>
|
Live
Demo
To check Live demo
click on below buttons to change div color
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
0 comments :
Note: Only a member of this blog may post a comment.