Handling CSS by using jQuery

About jQuery

jQuery is a JavaScript library that comes in a JavaScript file with the extension .js. You can get jQuery from the official jQuery site,www.jquery.com.
jQuery specializes in letting you pick out page elements so you can work on them. When you use jQuery, you usually use a function named jquery( ) to gain access to the jQuery library. In fact, there’s a shortcut: you can also call the function $( ), and that’s what we’ll do.
To access an element with the ID "id", you call the function $(#id), which returns a
set of all elements with that ID. Because IDs must be unique, that’s only one element.
Syntax:#id
Selects a single element with the specified ID.
Download Source
View output
By using jQuery we can handle CSS dynamically.

<html>
<head>
<title>jQuery and CSS</title>
<script src="jquery-1.5.min.js"></script>
<style type="text/css">
table {background-color:#000000;}
div {font-weight:bold;color:#ffffff;height:50px;width:170px;border:solid 2px #ffffff;}
.classBLUE {background-color:#0000ff;color:#ffffff;}	
.classRED {background-color:#ff0000;color:#ffffff;}
.classGREEN {background-color:#00cc00;color:#ffffff;}
</style>
<script type="text/javascript">
 
function setGreen() {
	$( "#divRGB" ).removeClass('classBLUE');
	$( "#divRGB" ).removeClass('classRED');
	$( "#divRGB" ).addClass('classGREEN');
	$( "#divRGB" ).text('Green');
}	
function setBlue() {
        $( "#divRGB" ).removeClass('classGREEN');
	$( "#divRGB" ).removeClass('classRED');
	$( "#divRGB" ).addClass('classBLUE');
	$( "#divRGB" ).text('Blue');
}
function setRed() {
        $( "#divRGB" ).removeClass('classBLUE');
	$( "#divRGB" ).removeClass('classGREEN');
	$( "#divRGB" ).addClass('classRED');
	$( "#divRGB" ).text('Red');
}	
</script>
</head>
<body>
<table width="170px">
<tr><td colspan="3" align="center"> 
<div id="divRGB">CSS using jQuery</div>
</td></tr>
<tr>
<td><input type = "button" value="Red"  önclick="setRed()"> </input></td>
<td><input type = "button" value="Green"  önclick="setGreen()"> </input></td>
<td><input type = "button" value="Blue"  önclick="setBlue()"> </input></td>
</tr>
</table>
</body>
</html>