CSS自定義屬性Expression(轉)

CSS自定義屬性Expression(轉)[@more@]

　　CSS的出現使網頁製作者在對網頁元素的控制方便許多，當然，有利必有弊，CSS只能對顏色、大小、距離等靜態樣式有效，對於要實現某些html元素的動態樣式就顯得有些力不從心。

　　有了CSS的自定義屬性Expression，可以自己定義屬性，自己在屬性裡寫需要的程式碼，這樣就可以結合CSS的特性與JS特效，實現對整體頁面上相同元素的控制。是不是覺得有點不可思議？我們先拿新手們經常問的怎麼消除頁面上的連結虛線框為例。

　　通常的做法是：

<a href="http://blog.itpub.net/8225414/viewspace-957430/link1.htm" onfocus="this.blur()" rel="nofollow">link1</a> <a href="http://blog.itpub.net/8225414/viewspace-957430/link2.htm" onfocus="this.blur()" rel="nofollow">link2</a> <a href="http://blog.itpub.net/8225414/viewspace-957430/link3.htm" onfocus="this.blur()" rel="nofollow">link3</a>

　　採用expression的效果如下：

　　注：如果你無法看到效果，請升級你的瀏覽器試試。

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

採用expression的做法如下：

<style type="text/css"> a {star : expression(onfocus=this.blur)} </style>

　　說明：裡面的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">

　　看了這麼多，感覺怎麼樣，是不是有點概念了呢。使用CSS的自定義屬性很簡潔地用較少的程式碼實現了用JS產生的相同的效果，真正起到了事半功倍的作用，你還不趕快去試試