How to Control CSS with jQuery

How to Control CSS with jQuery

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

Read more