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還是有很多問題,所以盡量不要使用。
文章列表