Handling CSS by using jQuery

Description

Handle CSS using jQuery/Javascript
Here are two alternatives. In jQuery, you may use attr method to set attribute values of selected elements. In JavaScript, you may use className property to do the same thing.

Code

<html>
<head>
<title>Handle CSS using jQuery/Javascript</title>
<script src="jquery-1.7.1.min.js"></script>
<style type="text/css">
table {background-color:gray;}
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 setGreenjQuery()
{
    $("#divRGB").attr("class", "classGREEN");
}
function setBluejQuery()
{
    $("#divRGB").attr("class", "classBLUE");
}
function setRedjQuery()
{
    $("#divRGB").attr("class", "classRED");
}
 
function setGreenJs()
{
    document.getElementById("divRGB").className = 'classGREEN';
}
function setBlueJs()
{
    document.getElementById("divRGB").className = 'classBLUE';
}
function setRedJs()
{
    document.getElementById("divRGB").className = 'classRED';
}
</script>
</head>
<body>
<table width="170px">
<tr>
<td colspan="3" align="center">
<div id="divRGB">Handle CSS</div>
</td>
</tr>
<tr>
<td colspan="3" align="center">By jQuery</td>
</tr>
<tr>
<td><input type="button" value="Red" onclick="setRedjQuery()"/></td>
<td><input type="button" value="Green" onclick="setGreenjQuery()"/></td>
<td><input type="button" value="Blue" onclick="setBluejQuery()"/></td>
</tr>
<tr>
<td colspan="3" align="center">By Javascript</td>
</tr>
<tr>
<td><input type="button" value="Red" onclick="setRedJs()"/></td>
<td><input type="button" value="Green" onclick="setGreenJs()"/></td>
<td><input type="button" value="Blue" onclick="setBlueJs()"/></td>
</tr>
</table>
</body>
</html>

Browser Compatibility

I have tested this code in the following Web browsers:

Internet Explorer
Mozilla Firefox
Google Chrome
Safari
Opera

License

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

About the Author

thatraja

Web Developer

India

Member

Follow on Twitter
Google+

Google

Programmer | CodeProject MVP, Mentor | Author | Geek | Blogger | Bachelor | Dude

About him & his blog? check out here.

In Codeproject, he posted a blogpost & more than couple of Tip/Tricks, hope he'll write more soon. And he got a place in CCC table.

In programming, he wants to go with new things like HTML5, CSS3, WP7, Silverlight, WPF, WCF, etc.,

His hobbies are watching movies, Codeproject, being alone, etc.,

Article Top

Poor

Excellent

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

Alternative to Handling CSS by using jQuery

DescriptionH...

Type	Tip/Trick
Licence	CPOL
First Posted	18 Dec 2011
Views	1,299
Bookmarked	1 time

CSSHTMLjQuery