Click here to Skip to main content
Click here to Skip to main content

Handling CSS by using jQuery

By , 25 Apr 2011
Rate this:
Please Sign up or sign in to vote.

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
Software Developer (Senior)
India India

Comments and Discussions

 
GeneralI like the metal umlaut in "önclick" ;-) PinmemberDoc Lobster14-Jul-11 10:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 25 Apr 2011
Article Copyright 2011 by R S Dodiya
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid