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>
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • Pingback: alkaline()

  • Pingback: water ionizer()

  • Pingback: watch tv show episodes()

  • Pingback: free movie downloads()

  • Pingback: stream movies()

  • Pingback: watch free movies online()

  • Pingback: Blue Coaster33()

  • rahma

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

  • http://Project 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.

  • http://brainbuzzmedia.com Andrew

    Thanks man, this helped me out.

  • 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?

    • http://www.mkyong.com mkyong

      Thanks for your typo report, article is updated. Appreciated your help.

  • Caroline

    Hi Mkyong,

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

    • http://www.mkyong.com mkyong

      Sorry, i don’t get you.