How to Add or Remove CSS class from element: jQuery

September 28, 2014 , , , 0 Comments

Earlier article was about to using basic jQuery syntaxes and changing default behaviour of html elements in MVC. As html easily provide to include CSS classes to change the design of an element or we can say anything on the web-page. The same operation can easily be performed by using jQuery according to some conditions or on some events triggering.

Add CSS class: To add a class using jQuery, programmer have to use the function addClass() which have some parameters including property name and the value to be assign.
Add below style on the page:
<style>    a.test {        font-weight: bold;    }</style>
This above style will make font-weight: bold for the anchor tag using this css class. To add this CSS class on the anchor tag, write the following line of code:

$( "a" ).addClass( "test" );

Remove Class: On click of this anchor tag or some other element, we can simple remove this class by using the below line of code:

$( "a" ).removeClass( "test" );

This code can be written on the click event of any element on the page or on some other event. Programmer must place all this jQuery code in the below block so that your code executes when the document is ready to be worked on.
$(document).ready(function(){ //write your code here});

Subhash Sharma

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google