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>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

R S Dodiya

Web Developer

India

Member

kgh-esolutions

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

jQuery is very usefull tools for browser html tags handling. This article shows CSS through jQuery.

Type	Tip/Trick
Licence	CPOL
First Posted	21 Apr 2011
Views	17,563
Bookmarked	6 times

CSSHTMLjQuery

		9,879,772 members (47,207 online) Visit CodeProject.TV Discuss CodeProject.TV Sign in Email Password Forgot your password? Sign in using

Handling CSS by using jQuery

About jQuery

License

About the Author

Comments and Discussions