jQuery is a powerful javascript framework. It is fun to control CSS with jQuery, you can easily manage CSS with jQuery, can add/remove css properties, classes and all other cool stuff by jquery.
Add/Remove CSS class with jQuery.
1. Load CSS sheet and jQuery.
<link rel="stylesheet" href="style1.css"> <script src="jquery.js"></script>
2. Give id to the block or paragraph to which you want to add/remove css class
<span id="text1">This is the sample text paragraph </span>
3. Use jquery to add CSS class
<script>
$('#text1').addClass('style1')
</script>
4. you can also add button to execute jquery, e.g
<button id="btn1">add CSS</button>
write query on button click
<script>
$('#btn1').click(function() {
$('#text1').addClass('style1')
})
</script>
Add/Remove CSS properties with jQuery
1. add css property
$('#text1').css('color','blue');
2. remove css property
$('#text1').css('color','');
Full HTML Code for Managing CSS with jQuery
<html>
<title> Manage CSS with jQuery</title>
<head> <link rel="stylesheet" href="style1.css"> </head>
<body>
<h2> add css classes with jquery </h2>
<span id="text1">This is the sample text paragraph </span>
<p>
<button id="btn1">add CSS</button>
<button id="btn2">remove CSS</button>
<button id="btn3">add color</button>
<button id="btn4">remove color</button>
</p>
<script src="jquery.js"></script>
<script>
$('#btn1').click(function() {
$('#text1').addClass('style1');
})
$('#btn2').click(function() {
$('#text1').removeClass('style1');
})
$('#btn3').click(function() {
$('#text1').css('color','blue');
})
$('#btn4').click(function() {
$('#text1').css('color','');
})
</script>
</body>
</html>
This is how you manage CSS with jQuery
