Click here to Skip to main content
13,247,804 members (61,809 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


8 bookmarked
Posted 21 Apr 2011

Handling CSS by using jQuery

, 25 Apr 2011
Rate this:
Please Sign up or sign in to vote.
jQuery is very usefull tools for browser html tags handling. This article shows CSS through 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,
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.
Selects a single element with the specified ID.
Download Source
View output
By using jQuery we can handle CSS dynamically.
<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;}
<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');
<table width="170px">
<tr><td colspan="3" align="center"> 
<div id="divRGB">CSS using jQuery</div>
<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>


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
Technical Lead Wipro Ltd.
India India

You may also be interested in...


Comments and Discussions

Generalgood example and nice article. Pin
sudhansu_k12319-Dec-11 21:53
membersudhansu_k12319-Dec-11 21:53 
GeneralI like the metal umlaut in "önclick" ;-) Pin
Doc Lobster14-Jul-11 11:08
memberDoc Lobster14-Jul-11 11:08 
I like the metal umlaut in "önclick" Wink | ;-)

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

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

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