If you want to add or remove CSS classes from your HTML page, jQuery library provides certain methods like jQuery hasClass(), jQuery addClass(), and jQuery removeClass(). A single method jQuery toogleClass() method perform both add and remove the Class alone on the occuring of some event.
So, let’s start learning each method one by one.
jQuery hasClass() Method
jQuery hasClass method is used to check the existence of the class in the HTML element. You can perform some action after checking if the CSS class already present in the element.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-has").click(function(){ alert($("#para-has").hasClass("myhasclass")); }); }); </script> <button id="btn-has">Click to Check Has Class</button> <p id="para-has" class="myhasclass">This is the jQuery Tutorial of check CSS class existence.</p> |
Output
When you click the below button, it checks whether the class 'myhasclass' is exist or not. If the class is exists, it gives true in the alert message. Otherwise, it gives false in the alert message box.
This is the jQuery Tutorial of check CSS class existence.
The above example checks the existence of the CSS class when you click the button. If the class is present in the element, it gives you a true in the alert and if not present, it gives you a false alert.
The element present above contains the CSS class and the alert gives you true as the output of the jQuery hasClass().
jQuery addClass() Method
jQuery addClass method adds the class to the HTML element you have selected. If the element already contains the CSS class, it inserts the class again.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .myaddclass{ background:#ccc; padding:10px; } </style> <script> $(document).ready(function(){ $("#btn-add").click(function(){ $("#para-add").addClass("myaddclass"); }); }); </script> <p>When you click the below button, it adds the class <code>'myaddclass'</code> to the below p element.</p> <button id="btn-add" class="btn btn-primary">Click to Add Class</button> <p id="para-add">This is the jQuery Tutorial of add CSS class.</p> |
Output
When you click the below button, it adds the class 'myaddclass' to the below p element.
This is the jQuery Tutorial of add CSS class.
The above example contains the button to click and add the CSS class. The CSS class contains some styles properties like background and padding. When you add this class to the HTML element, the CSS properties automatically applies to the selected HTML element
On the click of the button, the HTML element changes its appearance on the addition of the CSS class.
jQuery removeClass() Method
jQuery removeClass() removes the CSS class from the selected HTML element. If the element contains the CSS class more than one times, it removes all the classes mentioned in the jQuery removeClass().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .myremoveclass{ background:#ccc; padding:10px; } </style> <script> $(document).ready(function(){ $("#btn-remove").click(function(){ $("#para-remove").removeClass("myremoveclass"); }); }); </script> <p>When you click the below button, it removes the class <code>'myremoveclass'</code> as well as the appearance of below p element.</p> <button id="btn-remove">Click to Remove Class</button> <p id="para-remove" class="myremoveclass">This is the jQuery Tutorial of remove CSS class.</p> |
Output
When you click the below button, it removes the class 'myremoveclass' as well as the appearance of below p element.
This is the jQuery Tutorial of remove CSS class.
The above example removes the CSS class on click of the button. The selected HTML element change its overall appearance and styling after the removal of the CSS class.
jQuery toggleClass() Method
The jQuery toggleClass() method perform both add and remove task from the occurring of some event. If the class already present in the selected HTML element, jQuery toggleClass() remove the class and if not present, it adds the CSS class from the HTML element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .toggleclass{ background:#ccc; padding:10px; } </style> <script> $(document).ready(function(){ $("#btn-toggle").click(function(){ $("#para-toggle").toggleClass("toggleclass"); }); }); </script> <p>When you click the below button, it add/remove the class <code>'toggleclass'</code> from the below p element.</p> <button id="btn-toggle">Click to Toggle Class</button> <p id="para-toggle" class="toggleclass">This is the jQuery Tutorial of toggle CSS class.</p> |
Output
When you click the below button, it add/remove the class 'toggleclass' from the below p element.
This is the jQuery Tutorial of toggle CSS class.
Click the button given above to see the action perform by the toggleClass(). It removes the class from the HTML element as well as its appearance.
You must also learn:-