jQuery add and remove Classes


jQuery के through किसी element में css classes को add / remove करने के लिए कुछ methods provide किये हैं जिनकी help से css classes को आसानी से add / remove कर सकते हैं।

  1. addClass()
  2. removeClass()
  3. hasClass()
  4. toggleClass()

jQuery addClass

addClass() किसी भी दिए गए selected element में class को add करता है।

jQuery addClas Syntax

$(selector).addClass(class_name);

jQuery addClass Example

File : jquery_addClass.html

CopyFullscreenClose Fullscreen Run
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery addClass() Example </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
      .stylediv{
        background-color: powderblue;
        color: white;
        padding: 5px;
        font-weight: bold;
      }
    </style>
  </head>	
  <body>
  	<p id="target_addclass_elm">Class will be add , as you click on the bellow button .</p>
    <button id="target_addclass_btn">Click Here.</button>
    <script> 
		$(document).ready(function(){
		  	$("#target_addclass_btn").click(function() {
		  		$('#target_addclass_elm').addClass('stylediv').text('Class Added !.');
		  	});
		});
	</script>
  </body>
</html>
Output

Class will be add , as you click on the bellow button .


Note
Example में addClass() method के बाद ही text() का use किया गया है , जिससे कि class add होने के बाद ही text method रन हो सके। Actually इसे Method Chaining कहते है , जिससे हम single statement में ही कई सारे methods को Run कर सकें।


jQuery removeClass

removeClass() method , किसी element से pass की गयी class को remove करता है।

jQuery removeClass Example
$(target_element).removeClass('class_name');

jQuery hasClass

hasClass() method check करता है , की class selected element में added है या नहीं। अगर class added है तो true return होता है otherwise false .

jQuery hasClass Example

if($(selector).hasClass('className')){
   /*class added , do whatever you want*/
}
else{
   /*class not added*/
}

jQuery toggleClass

toggleClass() class को add / remove दोनों का काम करता है , अगर element में class add नहीं है तो उस element में class add हो जाती है और अगर class added है तो उस element से class remove हो जाती है।

jQuery toggleClass Example

File : jquery_toggleClass.html

CopyFullscreenClose Fullscreen Run
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery toggleClass() Example </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
      .stylediv{
        background-color: powderblue;
        color: white;
        padding: 5px;
        font-weight: bold;
      }
    </style>
  </head>	
  <body>
  	<p id="target_elm" class="stylediv">Click bellow button button to see result.</p>
    <button id="toggleclass_btn">toggleClass</button>
    <button id="hasclass_btn">hasClass</button>
    <script> 
		$(document).ready(function(){
        /*toggle class*/
		  	$("#toggleclass_btn").click(function() {
		  		$('#target_elm').toggleClass('stylediv');
		  	});

        /*now check if class is added*/
        $("#hasclass_btn").click(function() {
          alert($('#target_elm').hasClass('stylediv'));
        });
		});
	</script>
  </body>
</html>
Output

Click bellow button button to see result.

Hey ! I'm Rahul founder of learnhindituts.com. Working in IT industry more than 4.5 years. I love to talk about programming as well as writing technical tutorials and blogs that can help to others .... keep learning :)

Get connected with me - LinkedIn Twitter Instagram Facebook