CSS自定義屬性Expression

1.給元素固有屬性賦值
在圖片縮放時用得最多

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

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

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

</style>

2.給元素自定義屬性賦值   
有了CSS的自定義屬性Expression，能夠本身定義屬性，本身在屬性裏寫須要的代碼，這樣就能夠結合CSS的特性與JS特效，實現對總體頁面上相同元素的控制。是否是以爲有點難以想象？咱們先拿新手們常常問的怎麼消除頁面上的連接虛線框爲例。 

一般的作法是：
<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的作法以下：
<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="#FF0000";
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">