通过一个实例代码来说明:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS-expression Example</title>
<style>
tr
{
background-color:expression(
(this.sectionRowIndex%2!=0)?"white":"#e8e8e8"
);
mevent:expression( //这里的mevent是自定义的属性名
onmouseover=function(){
this.style.backgroundColor="#0099cc";
},
onmouseout=function(){
this.style.backgroundColor="";
}
)
}
</style>
</head>
<body >
<table name="tab" id="tab" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
可以看出CSS的expression功能的两个优点:
1.可以对HTML对象进行批量处理,大大地简化了写JS代码的工作。
2.使CSS和HTML代码有效地分离,使CSS代码和HTML元素的耦合度减小,便于代码的维护。
其实expression就是把JS代码内嵌到了CSS属性中
但是这种用法也有一个缺点,就是特别消耗资源,要严格控制这种方法的用量。不然页面会变得非常慢。