jQuery addClass() Method
- The addClass() method adds one or more class names to the selected elements.
- This method does not remove existing class attributes, it only adds one or more class names to the class attribute.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.c1
{
font-size: 50px;
}
.c2
{
color:red;
}
.c3
{
font-family: cooper;
}
</style>
</head>
<body>
<p>My New Paragraph</p>
<input type="button" value="Add Class" id="btn1">
<script src="JQuery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").addClass("c1 c2 c3");
});
});
</script>
</body>
</html>
jQuery removeClass() Method
- The removeClass() method removes one or more class names from the selected elements.
- Note: If no parameter is specified, this method will remove ALL class names from the selected elements.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.c1
{
font-size: 50px;
}
.c2
{
color:red;
}
.c3
{
font-family: cooper;
}
</style>
</head>
<body>
<p>My New Paragraph</p>
<input type="button" value="Add Class" id="btn1">
<input type="button" value="Remove Class" id="btn2">
<script src="JQuery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").addClass("c1 c2 c3");
});
$("#btn2").click(function(){
$("p").removeClass("c1 c2 c3");
});
});
</script>
</body>
</html>
jQuery toggleClass() Method
- The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
- This method checks each element for the specified class names. The class names are added if missing, and removed if already set – This creates a toggle effect.
- However, by using the “switch” parameter, you can specify to only remove, or only add a class name.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.c1
{
font-size: 50px;
}
.c2
{
color:red;
}
.c3
{
font-family: cooper;
}
</style>
</head>
<body>
<p>My New Paragraph</p>
<input type="button" value="Add Class" id="btn1">
<input type="button" value="Remove Class" id="btn2">
<input type="button" value="Toggle Class" id="btn3">
<script src="JQuery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").addClass("c1 c2 c3");
});
$("#btn2").click(function(){
$("p").removeClass("c1 c2 c3");
});
$("#btn3").click(function(){
$("p").toggleClass("c1 c2 c3");
});
});
</script>
</body>
</html>
These 3 Methods With Bootstrap Classes
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="../../bs5/css/bootstrap.min.css">
<style>
/*
.c1
{
font-size: 50px;
}
.c2
{
color:red;
}
.c3
{
font-family: cooper;
}
*/
</style>
</head>
<body>
<p>My New Paragraph</p>
<input type="button" value="Add Class" id="btn1">
<input type="button" value="Remove Class" id="btn2">
<input type="button" value="Toggle Class" id="btn3">
<script src="JQuery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").dblclick(function(){
$("p").addClass("bg-primary text-center");
});
$("#btn2").click(function(){
$("p").removeClass("bg-primary text-center");
});
$("#btn3").click(function(){
$("p").toggleClass("bg-primary text-center");
});
});
</script>
</body>
</html>
Click Below Link to Download Notes & Source Code Of This Blog
https://www.mediafire.com/file/s3vq2q8tttm3r0i/AddClass+RemoveClass.rar/file
No responses yet