How to add / remove CSS class dynamically in jQuery

jQuery comes with addClass() and removeClass() to add or remove CSS class dynamically. For example,

  1. $(‘#para1’).addClass(‘highlight’); – Add a “highlight’ css class to elements that contain id of “para1”.
  2. $(‘#para1’).removeClass(‘highlight’); – Remove a “highlight’ css class from elements that contain id of “para1”.

Example


<html>
<head>
<style type="text/css">
  .highlight { 
  	background:green;
  }
 </style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
  <h1>jQuery add / remove css class example</h1>
	
  <p id="para1">This is paragraph 1</p>
  <p>This is paragraph 2</p>
  <p>This is paragraph 3</p>
  <p>This is paragraph 4</p>
  
  <button id="addClass">Add highlight</button>
  <button id="removeClass">Remove highlight</button>
  
<script type="text/javascript">
	
    $("#addClass").click(function () {
		
	  $('#para1').addClass('highlight');
	  
    });
	
    $("#removeClass").click(function () {
		
	  $('#para1').removeClass('highlight');
	  
    });
	
</script>
</body>
</html>

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
9 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
Albypaulo robsonJayalekhalslencryptedrahma Recent comment authors
newest oldest most voted
Caroline
Guest
Caroline

Hi Mkyong,

At the first?there has a mistake?
the first and second is equal?

Caroline
Guest
Caroline

Hi Mkyong,
I come from china.My English is bad, please forgive me, i found a mistake ,Punctuation display problems?in the paragraph first,you have a mistake, example:
$(‘#para1?).addClass();
$(‘#para1?).addClass();
you can see?

Andrew
Guest
Andrew

Thanks man, this helped me out.

Sunil Bhardwaj
Guest
Sunil Bhardwaj

if(data.length >0)
{
$(‘#suggestions’).show();
$(‘#autoSuggestionsList’).html(data);
}
In above code in #autoSuggestionsList’ we have list of names in the list view.
But I am unable to choose one value from the list i.e #autoSuggestionsList’.
Kindly provide me the jquery code for choose one value and added this on the username testbox field.

Thanks,
Sunil.

rahma
Guest
rahma

if i do not have para1 id and I have common class in all as ‘lst_item. then how to write JQ.

lslencrypted
Guest
lslencrypted

jQuery has a class toggle function that makes this easier 🙂

https://api.jquery.com/toggleClass/

Jayalekha
Guest
Jayalekha

hi mkyong, how to add class to an tag with dynamically generated id

paulo robson
Guest
paulo robson

hey Obrigadão more helped a lot here in my system this script

thank mkyong

Alby
Guest
Alby

hi mkyong, I have a jsp page that call css file for example <link rel="stylesheet" href="”/>. Lets assume that my “file.css” contain a class named “.myStyle”. I try to call class “.myStyle” via jquery and put it in a table. this is my jquery code $(“#resultData”).append(“”).addClass(“myStyle”) and doesn’t work. Do you know why? Thanks