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>

 

四 运行效果