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 Dynamically to DIV Elements

Feb 28, 2013
Introduction:

In jQuery we have addClass(), removeClass() methods to add or remove css classes to elements dynamically or Adding and Removing CSS Class with jQuery.

Description
  
In previous article I explained jQuery create short urls using Google url shorter api , Simple Dropdown menu using CSS, jQuery image slideshow with semi transparent caption, Add blinking text using jQuery and many articles relating to
JQuery, CSS, asp.net, SQL Server etc. Now I will explain how to add or remove css classes to elements dynamically.

Add css class to element using jQuery

$('#divsample').addClass('divclass')
Remove css class to element using jQuery

$('#divsample').removeClass('divclass')
If you want to see it in complete example need to write the code as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Add Remove CSS Classes Dynamically</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#btnaddCSS').click(function() {
$('#divsample').addClass('divclass')
});
$('#btnRemoveCSS').click(function() {
$('#divsample').removeClass('divclass')
});
})
</script>
<style type="text/css">
.divclass
{
background-color:#FF6600;
color:White;
width:30%;
}
</style>
</head>
<body>
<div id="divsample">
<h4>jQuery Add or Remove CSS Classes</h4>
<p>Welcome to Aspdotnet-Suresh.com. <br />It will provide different kind dotnet related articles</p>
</div>
<div>
<input type="button" id="btnaddCSS" value="Add CSS Class" />
<input type="button" id="btnRemoveCSS" value="Remove CSS Class" />
</div>
</body>
</html>
Live Demo

For live demo click on below buttons

jQuery Add or Remove CSS Classes

Welcome to Aspdotnet-Suresh.com.
It will provide different kind dotnet related articles

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.