Expression 使之支持css的一些屬性

Expression

經常使用：

最小高度：

最大寬度：#container { width: expression((documentElement.clientWidth > 725) ? "725px" : "auto" ); }

3、讓IE6支持min-width同時又支持max-width

讓IE6即支持最小寬度又支持最大寬度限制設置。這種狀況咱們經常碰到對圖片控制，讓不肯定大小的圖片，若是太寬，不能超出必定範圍值，小的時候不控制他的方法，用到CSS代碼：

_width:expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));

消除噓線：　a {star : expression(this.onFocus=this.blur());}

li:child-first

.example l{float:left; margin-left:10px; _margin-left:expression(this.previousSibling==null?'0px':'10px');}

.example li:child-first{margin-left:0;}

 

目錄

CSS中的行爲—expression

Experssion組合

微軟公司產品Expression Studio

編輯本段CSS中的行爲—expression

　　CSS中使用expression有ie才能識別。IE5及其之後版本支持在CSS中使用expression，用來把CSS屬性和Javascript表達式關聯起來，這裏的CSS屬性能夠是元素固有的屬性，也能夠是自定義屬性。就是說CSS屬性後面能夠是一段Javascript表達式，CSS屬性的值等於Javascript表達式計算的結果。 在表達式中能夠直接引用元素自身的屬性和方法，也可使用其餘瀏覽器對象。這個表達式就好像是在這個元素的一個成員函數中同樣。

　　例子：

　　1.給元素固有屬性賦值

　　下面是定義container容器的寬度，若是<725就爲本身的寬度，不然就等於725，至關於max-width:725px;。

　　<style type="text/css" media="screen">

　　#container { width: expression((documentElement.clientWidth > 725) ? "725px" : "auto" ); }

　　</style>

　　2.給元素自定義屬性賦值

　　例如，消除頁面上的連接虛線框。 一般的作法是：

　　<a href="link1.htm" onfocus="this.blur()">link1</a>

　　<a href="link2.htm" onfocus="this.blur()">link2</a>

　　<a href="link3.htm" onfocus="this.blur()">link3</a>

　　粗看或許還體現不出採用expression的優點，但若是你的頁面上有幾十甚至上百個連接，這時的你難道還會機械式地Ctrl+C，Ctrl+V麼，況且二者一比較，哪一個產生的冗餘代碼更多呢？

　　採用expression的作法以下：

　　<style type="text/css">

　　a {star : expression(this.onFocus=this.blur());}

　　</style>

　　<a href="link1.htm">link1</a>

　　<a href="link2.htm">link2</a>

　　<a href="link3.htm">link3</a>

　　說明：裏面的star就是本身任意定義的屬性，你能夠隨本身喜愛另外定義，接着包含在expression()裏的語句就是JS腳本，在自定義屬性與expression之間可別忘了還有一個引號，由於實質仍是CSS，因此放在style標籤內，而非script內。OK，這樣就很容易地用一句話實現了頁面中的連接虛線框的消除。不過你先別得意，若是觸發的特效是CSS的屬性變化，那麼出來的結果會跟你的本意有差異。例如你想隨鼠標的移進移出而改變頁面中的文本框顏色更改，你可能想固然的會認爲應該寫爲

　　<style type="text/css">

　　input {star : expression(onmouseover=this.style.backgroundColor="#F5F5F5";

　　onmouseout=this.style.backgroundColor="#FFFFFF")}

　　</style>

　　<input type="text">

　　<input type="text">

　　<input type="text">

　　可結果倒是出現腳本出錯，正確的寫法應該把CSS樣式的定義寫進函數內，以下所示：

　　<style type="text/css">

　　input {star : expression(onmouseover=function()

　　{this.style.backgroundColor="#FF0000"},

　　onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }

　　</style>

　　<input type="text">

　　<input type="text">

　　<input type="text">

　　注意:不是很是須要，通常不建議使用expression，由於expression對瀏覽器資源要求比較高。