CSS颜色和背景属性

一 介绍

1、backgroundColor属性

backgroundColor属性用于设置或检索对象的背景颜色。其对应的样式标签属性为background-color属性。

语法：

background-color : color 

说明：在style对象中，样式属性与样式标签属性的语法中的参数类型基本相同。

color：指定颜色。

注意：用颜色名称指定color可能不被一些浏览器接受。

2、color属性

color属性用于设置或检索对象的文本颜色，无默认值。其对应的样式标签属性为color属性。

语法：

color : color 

color：指定颜色。

注意：用颜色名称指定color可能不被一些浏览器接受。

 

二 应用

选中的行背景变色，鼠标指向表格中的任意一个单元格时，该单元格所在行的背景颜色及字体颜色改变。

主要思想是当鼠标指向表中的单元格时将通过onMouseOver事件来调用自定义函数over()来改变单元格所在行的前景色和背景色。

当鼠标离开单元格时将通过onMouseOut事件将所选行的前景色和背景色改变为初始状态。

主要是通过style对象的backgroundColor和color属性来改变行的背景色和前景色。

 

三 代码

<table width="234" height="77" border="1">
 <tr align="center" id="tr1" onMouseOver="over(this.id)" onMouseOut="out(this.id)">
	 <td width="52">&nbsp;</td>
	 <td width="65">商品</td>
	 <td width="95">价格（元）</td>
 </tr>
 <tr align="center" id="tr2" onMouseOver="over(this.id)" onMouseOut="out(this.id)">
	 <td>A商场</td>
	 <td>S商品</td>
	 <td>100</td>
 </tr>
 <tr align="center" id="tr3" onMouseOver="over(this.id)" onMouseOut="out(this.id)">
	 <td>B商场</td>
	 <td>S商品</td>
	 <td>80</td>
 </tr>
</table>
<script language="JavaScript">
function over(trname)
{
	eval(trname).style.backgroundColor="0000FF";
	eval(trname).style.color="FFFFFF";
}
function out(trname)
{
 	eval(trname).style.backgroundColor="FFFFFF";
 	eval(trname).style.color="000000";
}
</script>

 

四 运行效果