How to CSS Class Add by Jquery with Demo?

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>