I have spent the better part of a day trying to figure this out, but cannot get it to work. What I am trying to do it reverse the background color of a cell with the font color and vise-versa. However for some reason I cannot get JavaScript to obtain the current assigned value of a CSS style.

Sample code of what I am trying to do.

Code:
<html>
 
<head>
<title></title>
 
<style type="text/css">
 
#startmnu {position:absolute;
	width:100px;
	height:200px;
	left:10px;
	top:292px;
	background-color:#333333;
	border:1px solid #ffffff;
	z-index:1}
 
#mnutxtcll {font-family:Trebuchet MS;
	font-size:9pt;
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	color:#ffffff;
	width:100px;
	height:20px;
	vertical-align:middle;
	background-color:#333333;
	cursor:hand;}
 
#mnuhr {width:90%;height:1px;}
 
</style>
 
<script type="text/javascript">
 
function InvertColors(id)
  { var bckgrdclr = document.getElementById(id).style.backgroundColor;
	 var txtclr = document.getElementById(id).style.color;
 
	document.getElementById(id).style.backgroundColor = txtclr;
	document.getElementById(id).style.color = bckgrdclr;
  }
 
</script>

</head>
 
<body>
 
<table id="startmnu" cellpadding="0" cellspacing="0" border="0">
  <tr><td><hr id="mnuhr"/></td></tr>
  <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)">Home</td></tr>
  <tr><td><hr id="mnuhr" /></td></tr>
  <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)">Documents</td></tr>
  <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)">Favorites</td></tr>
  <tr><td><hr id="mnuhr" /></td></tr>
  <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)">Programs</td></tr>
  <tr><td><hr id="mnuhr" /></td></tr>
  <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)">Settings</td></tr>
  <tr><td><hr id="mnuhr" /></td></tr>
</table>
 
</body>
 
</html>