If we want to manipulate css or we want to add some classes to our tags when page load or when we click on the button , we can achieve it by using jQuery addclass() method .
addClass() method add particular classes to the elements which are selected.
Syntax:-
.addClass( className [, time duration ] [, complete ] )
className:- This contain classes which we want to add in our elements.
time duration:- it specify that for how many time duration effect will take place.
complete:- This is a callback method .This method is called when effect get completed.
Below is the example of addClass() :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").addClass("red");
$("div").addClass("size");
});
});
</script>
<style>
.size {
font-weight: bold;
font-size: 40px;
}
.red {
color: red;
}
</style>
</head>
<body>
<h1>Test Heading1</h1>
<h2>Test heading2</h2>
<div>Test div</div>
<button>Add classes to elements</button>
</body>
</html>
In above example we are adding red class to our heading tags and size class to our div tag on button click.
0 Comment(s)