Live CSS change with jQuery November 13, 2012

Change css element style without reload pages in jQuery is very simple. So in this page I'll show you a simple css change using jQuery.

1. Add jQuery source:
You can download source form jQuery.com

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>

2. Use function .css() (read more here)
+) Design html:

Click -> 
Text 50px | 
Text 100px | 
BG Red | 
BG Blue
Text red | 
Text blue

Live css change 

+) Add scripts to control css on this page like:

<script>
// 01
$('#t50').click(function () {
 $('.main').css('font-size', '50px');
});
$('#t100').click(function () {
 $('.main').css('font-size', '100px');
});
// 02
$('#b1').click(function () {
 $('.main').css('background', 'red');
});
$('#b2').click(function () {
 $('.main').css('background', 'blue');
});
// 03
$('#tr').click(function () {
 $('.main').css('color', 'red');
});
$('#tb').click(function () {
 $('.main').css('color', 'blue');
});
</script>

Explanation:
- In this script i used .click() function to call .css() function
- In function .css() have 2 values for example .css('color', 'blue');. 1st 'color' mean name of style you set and 'blue' mean the value of this style.

3. Download this source and enjoin