jQuery has Basically three methods for CSS manipulation Following methods is explained using below example:
1.addClass() - Adds one or more classes to the selected elements
2.removeClass() - Removes one or more classes from the selected elements
3.toggleClass() - Toggles between adding/removing classes from the selected elements
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").toggleClass("main1");
$("#p2").addClass("main2");
$("#p3").removeClass("main3");
});
});
</script>
<style>
.main1 {
font-size: 120%;
color: red;
}
.main2 {
font-size: 120%;
color: blue;
}
.main3 {
font-size: 120%;
color: green;
}
</style>
</head>
<body>
<button>Toggle class "main" for p elements</button>
<p id="p1">This paragraph consist of toggle class it will cahnge its attribute on click function.</p>
<p id="p2">This is another paragraph which has addClass function and the new class will added to it.</p>
<p id="p3" class="main3"> This is the paragraph which is removed on click function.</p>
<b>Note:</b> Click the button more than once to see the toggle effect.
</body>
</html>
The first paragraph consist of toggle class it will change its attribute on click function.
On clicking the another paragraph it will add the addClass method and changes the size and color of the text while the next paragraph will contain the remove method which will remove whole text from the window
0 Comment(s)