CSS中expression的使用方法...

Posted on 2006-03-23 03:54  CQIT-CS  阅读(493)  评论(0编辑  收藏  举报

通过一个实例代码来说明:
<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>&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属性中
但是这种用法也有一个缺点,就是特别消耗资源,要严格控制这种方法的用量。不然页面会变得非常慢。

Copyright © 2024 CQIT-CS
Powered by .NET 8.0 on Kubernetes