expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,【这里的CSS属性可以是元素固有的属性,也可以是自定义属性。】是动态设置CSS属性的强大方法,但也存在着一定的危险性。
CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。
在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
1,给元素固有属性赋值
1 #div{ 2 position:absolute; 3 left:expression(document.body.offsetWidth-200+"px"); 4 top:expression(document.body.offsetHeight-250+"px"); 5 }
给一个div设置其左边距和上边距。document.body.offsetWidth是当前网页可见区域宽度。
2、给元素自定义属性赋值
用CSS自定义属性Expression对表格行间隔背景批量定义
1 <html> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 tr{ bg:expression(‘#F8F8F8,#EFEFEF‘.split(‘,‘)[rowIndex%2]); } 6 </style> 7 </head> 8 <body> 9 <table width="100%" border="0"> 10 <tr> 11 <td> </td> 12 </tr> 13 <tr> 14 <td> </td> 15 </tr> 16 <tr> 17 <td> </td> 18 </tr> 19 <tr> 20 <td> </td> 21 </tr> 22 <tr> 23 <td> </td> 24 </tr> 25 <tr> 26 <td> </td> 27 </tr> 28 <tr> 29 <td> </td> 30 </tr> 31 <tr> 32 <td> </td> 33 </tr> 34 <tr> 35 <td> </td> 36 </tr> 37 </table> 38 </body> 39 </html>
上面的代码可以实现表格行背景色(#F8F8F8,#EFEFEF)交替出现,不需要每行单独定义。
bg是自己任意定义的属性。在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非script内。
注意:
不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高
CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
性能优化:
一个减少CSS Expression计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS Expression。
但CSS Expression还是有很多问题,所以尽量不要使用。
原文:http://www.cnblogs.com/hsprout/p/5041241.html