Add CSS Class Dynamically In JQuery, JQuery Change CSS Class Dynamically, Add a CSS Class on click Using JQuery
Hi friends Today, I will tell you through this tutorial that how jquery can be used to add css class to onclick.
You will create a file of addcss.html name. It will copy and paste the code written in that file. First of all, I will tell you the code one by one.Then after that, I will test all the code in an addcss.html file and test it.So let’s go.
HTML CODE
<!DOCTYPE html> <html> <head> <title>CSS class Add using jQuery.</title> <script src="https://code.jquery.com/jquery-git.js"></script> </head> <body> <p id="pid" class="center"> Experts PHP JQuery Exercises</p> <input id="button1" type="button" value="Click to add a new Class" /> </body> </body> </html>
CSS CODE
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 200%;
color: blue;
}
</style>
SCRIPT CODE
<script>
$(document).ready(function(){
$('#button1').click(function(){ $('#pid').addClass('large');
});
});
</script>
id = “button1” This will be called by jquery.
id = “pid” will be added to the class called call by this id.
AddClass this class will add the class name to the class you want to add.
addcss.html
<!DOCTYPE html>
<html>
<head>
<title>CSS class Add using jQuery.</title>
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<p id="pid" class="center"> Experts PHP JQuery Exercises</p>
<input id="button1" type="button" value="Click to add a new Class" />
</body>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 200%;
color: blue;
}
</style>
<script>
$(document).ready(function(){
$('#button1').click(function(){ $('#pid').addClass('large');
});
});
</script>
</html>