概述
CSS表達式是動態設置CSS屬性的強大(但危險)方法。Internet Explorer從第5個版本開始支持CSS表達式。
兼容性
expression方法在其它瀏覽器中不起作用,因此在跨瀏覽器的設計中單獨針對Internet Explorer設置時會比較有用。
例子
隔1s切換一次背景顏色 input鼠標移入移出變換背景
body{
background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );
}
input
{
star : expression(
onmouseover=function(){this.style.backgroundColor="green"},
onmouseout=function(){this.style.backgroundColor="red"}
)
}
<body >
<input type="text"/>
</body>
問題
算頻率要比我們想象的多。千上萬次並且可能會對你頁面的性能產生影響。
頁面顯示和縮放時,就是在頁面滾動、乃至移動鼠標時都會要重新計算一次。隨便移動鼠標都可以輕松達到10000次以上的計算量。
查看方式
- 給CSS表達式增加一個計數器可以跟蹤表達式的計算頻率。
解決方案
- this使用
- 使用
一次性表達式? - 如果樣式屬性必須在頁面周期內動態地改變,使用
事件句柄來代替CSS表達式是一個可行辦法? - 使用jQuery方法代替
移除
在IE中,CSS是可以嵌入js表達式的,可以在CSS類中定義,但是將含有表達CSS類從DOM對象中移除,樣式表達式是不會失效的。
需要使用js調用style對象的removeexpression_r()方法才可去除。
如:width:expression_r(this.width > 730 ? "730px" : true);
需要使用:
$('#test')[0].style.removeexpression_r('width');去掉。
廢棄
http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx
不再支持CSS表達式的原因
- 更加符合標准
- 更加有利於性能提升
- 以及減少受攻擊面
