How To Add / Remove CSS Class Dynamically In JQuery

Home » Add Class To Id Element Jquery » How To Add / Remove CSS Class Dynamically In JQuery

Maybe your like

Skip to content Mkyong.com Mkyong.com Menu

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> Try Demo

mkyong

Founder of Mkyong.com, passionate Java and open-source technologies. If you enjoy my tutorials, consider making a donation to these charities.

Label Name* Email* Label Name* Email* 11 Comments Most Voted Newest Oldest Inline Feedbacks View all comments Caroline 14 years ago

Hi Mkyong,

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

1 Reply mkyong 14 years ago Reply to Caroline

Sorry, i don’t get you.

0 Reply Alby 9 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

0 Reply paulo robson 10 years ago

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

thank mkyong

0 Reply Jayalekha 11 years ago

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

0 Reply lslencrypted 11 years ago

jQuery has a class toggle function that makes this easier 🙂

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

0 Reply rahma 11 years ago

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

0 Reply Sunil Bhardwaj 12 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.

0 Reply Andrew 12 years ago

Thanks man, this helped me out.

0 Reply Caroline 14 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?

-1 Reply mkyong 14 years ago Reply to Caroline

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

2 Reply

Related Posts

  • How to use CSS and jQuery to hide and show tab content
  • Custom jQuery plugin and CSS to display and hide content
  • How to check if an image is loaded with jQuery
  • jQuery click() and dblclick() example
  • jQuery mouseup() and mousedown() example
  • jQuery keyboard events example
  • How to check if an enter key is pressed with jQuery
  • jQuery form events examples

Mkyong.com has provided Java and Spring tutorials, guides, and code snippets since 2008. All published articles are simple, easy to understand, and well-tested in our development environment.

Mkyong.com licenses all source code on this website under the MIT License.

Tools
  • Spring Framework
  • Quarkus Framework
  • Micronaut Framework
  • Oracle Java JDK
  • Eclipse Temurin JDK
  • OpenJDK JDK
  • Hibernate ORM
  • Maven Build Tool
  • Gradle Build Tool
  • Tomcat Application Server
  • Docker
Links
  • Maven Central
  • Docker Hub
  • Spring Guides
  • Quarkus Guides
  • Micronaut Guides
  • Martin Fowler
  • AskPython
About
  • About Us
  • Code License
  • Privacy Policy
  • Terms Of Use
  • Contact Us
Insert Search for:

Tag » Add Class To Id Element Jquery