CSS之expression

IE5及其后续的版本支持css中的expression,expression 可以在css中调用Javascript 表达式. 最简单的应用,例如在设置高度为整个页面的高度:

 

例一 .

mainDiv { 

   height:expression(document.body.clientHeight)

   left: expression(this.parentElement.offsetParent.scrollLeft); 

} 

 

上面的设置中,this 表示当前的元素对象.

 

例二:利用简单的表达式将屏幕高度控制到725

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

 

例三:有事件的表达式

 <style type="text/css">
 input {
     star : expression(onmouseover=function()       {this.style.backgroundColor="#FF0000"}, onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) 

} </style>  

 

例四:动态控制输入域的颜色

input{
 background-color:expression((this.readOnly && this.readOnly==true)?"#f0f0f0":"")
} 

 

     总体来讲，expression的作用就是能够调用javascript的一些方法和参数来动态的给CSS的属性赋值，用起来是比较方便的，实现了CSS主动与javascript的互联，以往一直是在JS中通过this.style.XXX="" 来改变CSS的属性， Javascript占主动，想法是很不错的，可惜只有IE支持,firefox不支持，而且对浏览器的性能要求也比较高。所以大家要权衡使用。