CSS颜色和背景属性

￡神魔★判官ぃ 2022-05-12 00:16 370阅读 0赞

**一 介绍**

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"> </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>

** **

**四 运行效果**

![144b2179-83a6-34aa-8fa3-331d03713d5a.png][]

[144b2179-83a6-34aa-8fa3-331d03713d5a.png]: /images/20220512/ad686b80fa6c434883c402c2dce7bea1.png