Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery - Add / Remove CSS Class to DIV Element

Oct 8, 2012
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.

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

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

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 RSS subscribe by email Subscribe by Email

0 comments :

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.