Main Tutorials

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 Author

author image
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

Subscribe
Notify of
11 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Caroline
12 years ago

Hi Mkyong,

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

Alby
8 years ago

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

paulo robson
8 years ago

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

thank mkyong

Jayalekha
9 years ago

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

lslencrypted
9 years ago

jQuery has a class toggle function that makes this easier 🙂

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

rahma
10 years ago

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

Sunil Bhardwaj
11 years ago

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.

Andrew
11 years ago

Thanks man, this helped me out.

Caroline
12 years ago

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?