Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Add, remove or toggle class of HTML control using jquery.
Posted By Sarin on Apr 01, 2013     RSS Feeds     Latest Hinduism news
6991 Views

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
Ge the total number of HTML elements in a page
Working with AJAX ColorPickerExtender control
Replacing and removing HTML Elements
Add, remove or toggle class of HTML control using jquery.
Trigger custom or manual postback in ASP.NET
Changing Grid View header and footer at run time
Call JavaScript functions from silverlight
Find range of elements in HTML with jquery
Changing CSS Properties of HTML element using JQuery
Working with forms-Jquery form selector

Post Comment