I have a html page which include a stylesheet. I defined my stylesheet as below :
[code]
/* style.css */
tr.tblrow td {
background-color: #def;
color: #000;
padding: 0px 5px;
}
[code]
And in my html page, I have a javascript function which will alert me about the background-color as well as font color.
Code:
<html>
<head>
<title>Bg Color</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript">
function getColor(obj) {
var el = event.srcElement;
var txtColor = el.style.color;
var bgColor = el.style.backgroundColor;
alert("txtColor = " + txtColor);
alert("bgColor = " + bgColor);
}
</script>
</head>
<form name="form">
<table>
<tr class="tblrow" onClick="getColor(this); return false">
<td>Student ID</td>
<td>Student Name</td>
</tr>
</table>
</form>
</html>
when I clicked on it, I get both color and background-color equal to blank. But, it suppose to be "txtColor = #000" and "bgColor = #def" .
Could anybody help to correct my mistake(s)? Thanks.