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, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
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

paulo robson
Guest
paulo robson

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

thank mkyong

Jayalekha
Guest
Jayalekha

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

lslencrypted
Guest
lslencrypted

jQuery has a class toggle function that makes this easier :)

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

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.

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.

Andrew
Guest
Andrew

Thanks man, this helped me out.

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?

Caroline
Guest
Caroline

Hi Mkyong,

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