jQuery comes with addClass() and removeClass() to add or remove CSS class dynamically. For example,
- $(‘#para1’).addClass(‘highlight’); – Add a “highlight’ css class to elements that contain id of “para1”.
- $(‘#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>
Hi Mkyong,
At the first?there has a mistake?
the first and second is equal?
Sorry, i don’t get you.
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
hey Obrigadão more helped a lot here in my system this script
thank mkyong
hi mkyong, how to add class to an tag with dynamically generated id
jQuery has a class toggle function that makes this easier 🙂
https://api.jquery.com/toggleClass/
if i do not have para1 id and I have common class in all as ‘lst_item. then how to write JQ.
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.
Thanks man, this helped me out.
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?
Thanks for your typo report, article is updated. Appreciated your help.