JQuery add/remove Class Dynamically

JQuery add/remove Class Dynamically

Here we will see how to add/remove class dynamically in JQuery. It provides addClass(“className”) and removeClass(“className”) functionality. Let’s see example in details.

  1. $(“#div1”).addClass(“redDiv”); will add redDiv css to div element whose id is “div1”.
  2. $(“#div2”).addClass(“blueDiv”); will remove blueDiv css from div element with id “div2”.

CSS code:

<style>

.redDiv
{
 background-color:red;
}

.blueDiv
{
 background-color:blue;
}

</style>

in above Css you can see, there is redDiv class and blueDiv class. On button click event we will add redDiv class to div1 and remove blueDiv class from div element “div2”.

JQuery add/remove class code:

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js 
type="text/javascript"></script>
<
script type="text/javascript" language="javascript"> $("document").ready(function(){ $("#Button1").click(function(){ $("#div1").addClass("redDiv"); $("#div2").removeClass("blueDiv"); }); }); </script>

HTML Code: You can copy below code into notepad and save it as text.html on your hard drive.  Open it in browser to see how Jquery add/remove class example works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>Jquery Change content of Div</title>
   <style>
   
   .redDiv
   {
    background-color:red;
   }
   
   .blueDiv
   {
    background-color:blue;
   }
   
   </style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
   <script type="text/javascript" language="javascript"> 
   
   $("document").ready(function(){
       
    $("#Button1").click(function(){
    
    $("#div1").addClass("redDiv");
    $("#div2").removeClass("blueDiv");
    
    });
      
   });
   
   </script>
    
</head>
<body>

<div id="div1">
This red div id div1.
</div>

<div id="div2" class="blueDiv">
This red div id div1.
</div>

<div>    
 <input id="Button1" type="button" value="button" />
</div>
</body>
</html>

Description:

In example above, on ready state of document we are finding button by it’s id “button1” and attaching click event to it.

 $("#Button1").click(function(){
// do something
}

Below code actually add and remove class from div elements.

$("#div1").addClass("redDiv");
$("#div2").removeClass("blueDiv");

Tags:

Jquery

JQuery check if class existBasics of jqueryLearning JqueryHow To Hide Div On Click Using JQueryJQuery Get Element By ID or class name or tag namejQuery Select element by class nameJQuery Collapsible DivJQuery SlideJquery Trim StringJQuery Animate Div Height and WidthGoogle JQuery CDN

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.