jQuery CSS Classes Manipulation, Easy To Learn jQuery CSS Classes Manipulation

jQuery CSS Classes Manipulation

jQuery provides several methods, such as addClass(), removeClass(), toggleClass(), etc. to manipulate the CSS classes assigned to HTML elements.

addClass()
removeClass()
toggleClass()
css()

jQuery addClass() Method

The jQuery addclass() method is used to add one or more class name to the selected element. This method is used only to add one or more class names to the class attributes not to remove the existing class attributes.

<!DOCTYPE html>
<html>
<head>
<title>jQuery addClass() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("h1, h2, p").addClass("color");
        $("div").addClass("important");
    $("#org_color").addClass("important orange-color");
    });
});
</script>
<style>
.important {font-weight: bold; font-size: xx-large; }
.color{color:#0099da;}
.orange-color{ color:#F90;}
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<h1>www.freetimelearning.com</h1>
<h2>www.freetimelearning.com</h2>
<p>www.freetimelearning.com</p>
<div>www.freetimelearning.com</div>
<h3 id="org_color">www.freetimelearning.com</h3>
 
<button type="button" class="btn">Click Here - addClass()</button>
 
</body>
</html>

Output :

jQuery removeClass() Method

The removeClass() method can remove a single class, multiple classes, or all classes at once from the selected elements. The following example shows how to remove a specific class attribute from different elements .

<!DOCTYPE html>
<html>
<head>
<title>jQuery removeClass() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("h1, h2, p").removeClass("color");
    });
});
</script>
<style type="text/css">
.color{color:#0099da;}
.btn{ padding:6px 15px;}
</style>
</head>
 
<body>
 
<h1 class="color">www.freetimelearning.com</h1>
<h2 class="color">www.freetimelearning.com</h2>
<p class="color">www.freetimelearning.com</p>
<div>www.freetimelearning.com</div><br>
 
<button type="button" class="btn">Click Here - removeClass()</button>
 
</body>
</html>

Output :

jQuery toggleClass() Method

The jQuery toggleClass() method is used to add or remove one or more classes from the selected elements. This method toggles between adding and removing one or more class name.

<!DOCTYPE html>
<html>
<head>
<title>jQuery toggleClass() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("h1, h2, p, div").toggleClass("color");
    });
});
</script>
<style type="text/css">
.color{color:#0099da;}
.btn{ padding:6px 15px;}
</style>
</head>
 
<body>
 
<h1>www.freetimelearning.com</h1>
<h2>www.freetimelearning.com</h2>
<p>www.freetimelearning.com</p>
<div>www.freetimelearning.com</div><br>
 
<button type="button" class="btn">Click Here - toggleClass()</button>
 
</body>
</html>

Output :

jQuery Tutorial