CSS expression属性

expression属性是在IE5版本之后支持使用的,用来把CSS属性和JavaScript脚本关联起来。简单粗暴的说,该属性是用来调用JavaScript代码的。

CSS属性后面是一段JavaScript代码,CSS的值是JavaScript表达式计算的结果。

给元素固有属性赋值

.box1{
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop+80)); /* 这里需要获取滚动高度+元素原本的高度 */
    z-index: 999;
}

document.documentElement.scrollTop 的意思是获取当前页面滚动条所滚动到的位置的数值,而再用eval()函数把它计算成数值。

这句代码最终的意思就是:你浏览器窗口的滚动条滑到哪,这个元素的位置就在哪。

给元素自定义属性赋值

用CSS自定义属性Expression对表格行间隔背景批量定义

<html>
  <head>
  <title></title>
  <style type="text/css">
  tr{ bg:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); }
  </style>
  </head>
  <body>
  <table width="100%" border="0">
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
   </tr>
 </table>
 </body>
</html>

上面的代码可以实现表格行背景色(#F8F8F8,#EFEFEF)交替出现,不需要每行单独定义。

bg是自己任意定义的属性。在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非script内。

注意

不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高

CSS expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

性能优化

一个减少CSS expression计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS expression。

CSS expression属性存在很多问题,最好的优化就是不使用该属性。

posted @ 2018-07-18 16:17 桃之夭夭~ 阅读(...) 评论(...) 编辑 收藏