Add, remove or toggle class of HTML control using jquery.
Many times, there is a need to add, remove or modify class of an element on some user action. For EX: when a user click on a button then the button should be disabled or should become of a different color etc. JQuery is very handy in such situations. JQuery has some inbuilt functions that allow you to add, remove or toggle class of any HTML or any ASP.Net server control. In this article, we will see how to use such JQuery function to change the appearance of HTML control.
Adding or removing class is one of the standard ways of styling class. One of the important features of JQuery is that you can add or remove any number of classes in a single statement.
For Ex:
$("a[href^='mailto:']").removeClass("mailto").removeClass("pdflink");
Or
$("a[href$='.pdf']").addClass('pdflink mailto');
Add class
To add a class, we use the following JQuery method
addClass(classnames)
Where classnames can be a single class name or list of class names separated by spaces
Remove class
Similarly, to remove a class, we use the following JQuery method
removeClass(classnames)
Where classnames can be a single class name or list of class names separated by spaces
Changing element styling
To change the style of an element, you have two options. Either you remove existing class and then add new class or toggle class of an html element. If the class which you are adding is already applied to an HTML element, then add statement will have no effect. Similarly, remove class will have no effect on an HTML element having no class defined in the remove class function.
Toggle Class
Sometimes we need to switch the styles back and forth to toggle the state of HTML control. For EX: turning some button from yellow to green or vice versa to indicate waiting or completed status or changing the color of odd and even rows based on some user action. For such situations, we use another JQuery method called as toggleClass
toggleClass(classname)
Where classname is the class name
One JQuery function that is very useful in changing classes is hasClass function. This function checks if the class is already applied to an HTML element
hasClass(classname)
Where classname is the class name to check
Demo:
Attached is the small demo where I have used all the above functions. I have used two buttons that will change or toggle the classes of my links. Below is the JQuery function of both buttons.
function AlterClass() {
// $("[id$=increase]").css("font-size", "xx-large");
$("a[href^='mailto:']").removeClass("mailto");
$("a[href$='.pdf']").removeClass("pdflink");
$("a[href^='mailto:']").addClass("pdflink");
$("a[href$='.pdf']").addClass("mailto");
$('#link2"]').removeClass("mysite");
}
function ToggleClass() {
if ($("a[href^='mailto:']").hasClass('mailto'))
$("a[href^='mailto:']").toggleClass('pdflink');
if ($("a[href$='.pdf']").is('.pdflink'))
$("a[href$='.pdf']").toggleClass('mailto');
}
This is the output:
Conclusion:
In this article, we saw how to add, remove or toggle single class or set of class on an HTML element. Additionally, we also saw how to check if any class is already applied to a HTML element.
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
Add, remove or toggle class of HTML control using jquery.
Calling web service asynchronously using jquery ajax
Commonly used string Functions
Replacing and removing HTML Elements
Trigger custom or manual postback in ASP.NET
Call JavaScript functions from silverlight
Cloning HTML Elements using jquery
Changing Grid View header and footer at run time
Ge the total number of HTML elements in a page
Working with AJAX ColorPickerExtender control
Post Comment