Articles → JQUERY → Addclass And Removeclass In Jquery

Addclass And Removeclass In Jquery

In this tutorial, I will explain about "addClass" and "removeClass" method of Jquery. Along with these two functions, I will also explain "attr()" function, because I will use this function in the demo application.

Prerequisite

Before you read this article, it is good to have

Hands on experience in jquery.
Hands on experience in creating html page.
Hands on experience in using css.

Addclass

A class is defined in cascading style sheet (CSS) to add style to the html element. By using jquery, we can apply class to the element using "addClass" function.

Syntax

$("<element_id>").addClass("<class_Name>");

Removeclass

This method is used to remove class attribute from the html element.

Syntax

  $("<element_id>").removeClass("<class_Name>");

Attr

This method is to get the value of attribute of html element.

  $("<element_id>").attr("<attribute_Name>");

For example, if we want to get the value of an attribute "class" from a div (having id "testDiv") then we can get the value as

  $("div#testDiv").attr("class")

Sample Application

Consider a demo application in which you want to show the bold and italic effect on a text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>addClass and removeClass demo</title>
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(
		      function() {
		        $("input#btnBold").click(
		          function() {
		            if ($("div#sampleDiv").attr("class") != undefined) {
		              $("div#sampleDiv").removeClass("applyItalicClass");
		            }
		            $("div#sampleDiv").addClass("applyBoldClass");
		          }
		        );
		        $("input#btnItalic").click(
		          function() {
		            if ($("div#sampleDiv").attr("class") != undefined) {
		              $("div#sampleDiv").removeClass("applyBoldClass");
		            }
		            $("div#sampleDiv").addClass("applyItalicClass");
		          }
		      );
		    }
		  );
	</script>
	<style type="text/css">
		.applyBoldClass
		    {
		      font-weight: bold;
		    }
		    .applyItalicClass
		    {
		      font-style: italic;
		    }
	</style>
</head>

<body>
	<div id="sampleDiv">Sample Text</div>
	<input type="button" value="bold" id="btnBold" /> 
	<input type="button" value="Italic" id="btnItalic" />
</body>

</html>

In this sample, we have 2 buttons "btnBold" and "btnItalic". The first button is for making the text bold and the second button makes the text italic when you click on it. There is a div tag having an id "sampleDiv" and "Sample Text" is the text written inside it.

There are 2 CSS classes "applyBoldClass" and "applyItalicClass". These classes are for making the text bold and italic.

Now, let's come to the jquery part. Here we have added click event on 2 buttons. First, in the "btnBold" click event I am checking if there is any class attribute defined in the div tag. If there is any attribute defined then remove the attribute using "removeClass" function and finally add the class "applyBoldClass" to the div tag using "addClass" function.

In this similar way, "btnItalic" button checks if there is any class attribute defined. If there is any attribute defined then remove the property using "removeClass" function and finally add the class "applyItalicClass" using "addClass" function.

Posted By -	Karan Gupta

Posted On -	Friday, November 18, 2011

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**