通过一个实例代码来说明:
<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"   >
   <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
   </tr>
   <tr >
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
   </tr>
   <tr >
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
   </tr>
   <tr >
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
   </tr>
 </table>
</body>
</html>
可以看出CSS的expression功能的两个优点:
    1.可以对HTML对象进行批量处理,大大地简化了写JS代码的工作。
    2.使CSS和HTML代码有效地分离,使CSS代码和HTML元素的耦合度减小,便于代码的维护。

其实expression就是把JS代码内嵌到了CSS属性中
但是这种用法也有一个缺点,就是特别消耗资源,要严格控制这种方法的用量。不然页面会变得非常慢。

相关文章:

  • 2021-06-26
  • 2021-07-25
  • 2021-05-27
  • 2021-11-24
  • 2021-11-24
猜你喜欢
  • 2022-03-04
  • 2022-02-26
  • 2021-11-08
相关资源
相似解决方案