How to change the class of the selected HTML element using jQuery?

Answer 1

Consider the following html

<button id="button" click="changeClass();">Click Me to change class of  div</button>
<div id="firstDIv" class="first">This is a div</div>

Now when you click on button,changeClass javascript function is called in that function you can write the following line to change class of a div

$('#firstDiv').removeClass('first').addClass('second');

If you want to toggle the class you can use toggle function of Jquery.

Answer 2

You can remove and add classes to your selected elements on some events via using removeClass and addClass function of jquery. Here is an Example:

$(document).ready(function(){
$("button").click(function(){
$("h1").removeClass("blue").addClass("important");
});
});


.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

Heading 1

Remove class from elements