65.9K
CodeProject is changing. Read more.
Home

Handling CSS by using jQuery

thatraja
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1 vote)

Dec 18, 2011

CPOL
viewsIcon

12151

DescriptionH...

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

Further Reading