How To Add / Remove CSS Class Dynamically In JQuery

This example shows how to add or remove the CSS class dynamically using the JQuery events. JQuery comes with method called addClass() to add CSS class dynamically. It shows how to add class attributes to different elements. We can add one or more classes within addClass() method. JQuery has provided another method called removeClass() to remove CSS class from the selected elements.

Add and Remove Class Example

<!doctype html>
<head>
<title>JQuery Add and Remove Class</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Add and Remove Class Example</h2>
<style type="text/css">
   .red
   {
      color:red;
   }
   .highlight
   {
      background:green;
   }
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $("#myaddclass").click(function(){
        $("h3,h5").addClass("red");
          $("h4").addClass("highlight");
      });
      $("#myremoveclass").click(function(){
        $("h4").removeClass("highlight");
      });
   });
</script>
<body>
   <button id="myaddclass">Add Color</button>
   <button id="myremoveclass">Remove Color</button>
   <h3>Hello world!!!!</h3>
   <h4>Welcome to JQuery!!!!</h4>
    <h5>JQuery is a JavaScript Library. </h5>
</body>
</html>
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“#myaddclass”).click(function()) line defines click event which occurs when button is clicked. Here we are using, button id #myaddclass.
  • The lines $(“h3,h5″).addClass(“red”); and $(“h4″).addClass(“highlight”); adds CSS class dynamically which uses CSS style sheet properties which sets h3 ,h5 lines to red color and h4 line will be highlighted with green color when we click on the Add Color button.
  • The lines $(“#myremoveclass”).click(function()) { $(“h4″).removeClass(“highlight”);} removes the color of h4 line when we click on the Remove Color button .

JQuery Add and Remove Class Demo

When you run the above example, you would get the following output :

AddRemoveClassExample

 

AddRemoveClassExample1

 

AddRemoveClassExample2

 

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*