欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS颜色和背景属性

程序员文章站 2022-03-29 10:08:15
...
一 介绍
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>
 
四 运行效果
CSS颜色和背景属性
            
    
    博客分类: JavaScript CSS颜色背景 
 
  • CSS颜色和背景属性
            
    
    博客分类: JavaScript CSS颜色背景 
  • 大小: 2.8 KB
相关标签: CSS 颜色 背景