If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
jQuery के through किसी element में css classes को add / remove करने के लिए कुछ methods provide किये हैं जिनकी help से css classes को आसानी से add / remove कर सकते हैं।
addClass() किसी भी दिए गए selected element में class को add करता है।
$(selector).addClass(class_name);
File : jquery_addClass.html
<!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>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 कर सकें।
removeClass() method , किसी element से pass की गयी class को remove करता है।
$(target_element).removeClass('class_name');hasClass() method check करता है , की class selected element में added है या नहीं। अगर class added है तो true return होता है otherwise false .
if($(selector).hasClass('className')){
/*class added , do whatever you want*/
}
else{
/*class not added*/
}toggleClass() class को add / remove दोनों का काम करता है , अगर element में class add नहीं है तो उस element में class add हो जाती है और अगर class added है तो उस element से class remove हो जाती है।
File : jquery_toggleClass.html
<!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>Click bellow button button to see result.
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
