文章出處

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>&nbsp;</td>
12   </tr>
13 <tr>
14     <td>&nbsp;</td>
15   </tr>
16   <tr>
17     <td>&nbsp;</td>
18   </tr>
19   <tr>
20     <td>&nbsp;</td>
21   </tr>
22   <tr>
23     <td>&nbsp;</td>
24   </tr>
25   <tr>
26     <td>&nbsp;</td>
27   </tr>
28   <tr>
29     <td>&nbsp;</td>
30   </tr>
31   <tr>
32     <td>&nbsp;</td>
33   </tr>
34   <tr>
35     <td>&nbsp;</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還是有很多問題,所以盡量不要使用。

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()