愚人博客

定義 
　　IE5及其以后版本支持在CSS中使用expression，用來把CSS屬性和Javas cript表達式關聯起來，這里的CSS屬性可以是元素固有的屬性，也可以是自定義屬性。就是說CSS屬性后面可以是一段Javas cript表達式，CSS屬性的值等于Javas cript表達式計算的結果。 在表達式中可以直接引用元素自身的屬性和方法，也可以使用其他瀏覽器對象。這個表達式就好像是在這個元素的一個成員函數中一樣。

　　給元素固有屬性賦值

　　例如，你可以依照瀏覽器的大小來安置一個元素的位置。

#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 + "px");
top: expression(document.body.offsetHeight - 110 + "px");
background: red;
}

　　給元素自定義屬性賦值

　　例如，消除頁面上的鏈接虛線框。 通常的做法是：

<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(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標簽內，而非s cript內。OK，這樣就很容易地用一句話實現了頁面中的鏈接虛線框的消除。不過你先別得意，如果觸發的特效是CSS的屬性變化，那么出來的結果會跟你的本意有差別。例如你想隨鼠標的移進移出而改變頁面中的文本框顏色更改，你可能想當然的會認為應該寫為 

<style type="text/css">
input 
{star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<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"> 

　　注意

　　不是非常需要，一般不建議使用expression，因為expression對瀏覽器資源要求比較高。

現在有一要求改頁面所有的<a href ,要求target為_blank,新開啟一個窗口。但不能一個個通過增加target='_blank'來修改href 。通過思考決定用css 的 expression用法來動態修改。方法如下：
<style>
A
{
target :expression(this.target="_blank");
}
</style> 

最早接觸到css中的expression是在 cssreboot 的2005版，當時他的主要應用是為了彌補ie里不支持max-width，因為是自適應屏幕寬度的，為了使分辨率過大時固定顯示960px的寬度他的樣式表是這樣定義的：max-width:960px;
width:expression(document.body.clientWidth > 960? "960px": "auto" );

E5及其以后版本支持在CSS中使用expression，用來把CSS屬性和Javascript表達式關聯起來，這里的CSS屬性可以是元素固有的屬性，也可以是自定義屬性。就是說CSS屬性后面可以是一段Javascript表達式，CSS屬性的值等于Javascript表達式計算的結果。 在表達式中可以直接引用元素自身的屬性和方法，也可以使用其他瀏覽器對象。這個表達式就好像是在這個元素的一個成員函數中一樣。

/*替換圖片CSS*/
#imgScript {   /*這里使用對象ID來通配樣式, 也可以定義一個css函數*/
 star:expression(
    onmouseover = function()
    { 
        /*替換圖片*/
        if(this.hover != null){
          this.name = this.src;
          this.src = this.src.replace(’.jpg’, ’_over.jpg’); 
          this.HasChg = 1;
       }
   },
   onmouseout = function()
  {  
       /*還原本來的圖片*/
     if(this.HasChg != null){
        this.src = this.name;
        this.HasChg = null;
    }
 }
) 

}/*end imgScript*/

=================
我們（特別是像我一樣的菜鳥）經常會遇到一個問題——圖片自適應。這個問題是很普遍的。在文章區，在論壇，可以這么說：哪兒需要上傳圖片，哪兒就存在這個問題，而論壇上也不時有人詢問。為什么？原因很簡單，我們不能要求網頁編輯或者你的論壇會員都會裁剪圖片或者了解最基本的html代碼——盡管這并沒有多少技術含量。
　　以前的解決方法主要是利用js來實現，但用過的人都知道該辦法有點繁瑣。還有一種是在外部容器定義over-flow:hidden。但這種辦法只會切割圖片而不會自動適用。
下面的辦法的出現應該感謝偉大的css2.0和更偉大的microsoft（沒有它就不必有這么啰嗦的代碼了^_^）。本人僅在ie6.0,ff1.5,opera7.0于winXP下測試通過，希望通過此篇文章拋磚引玉，望更多高手指點。關鍵在于：max-width:780px;以及下面那行。

固定像素適應:


百分比自適應：


提醒:1 該方法不只是用于img;
       2 max-width,max-height,min-width,min-height.



　網頁制作技巧實例解決：用CSS控制圖片自適應大小

　　圖片自動適應大小是一個非常常用的功能，在進行制作的時候為了防止圖片撐開容器而對圖片的尺寸進行必要的控制，我們可不可以用CSS控制圖片使它自適應大小呢？

　　我們想到了一個比較簡單的解決方法，雖然不是非常的完美，如果您的要求不是非常高，已經可以滿足你的需要了。我們看下面的代碼：

div img {
 max-width:600px;
 width:600px;
 width:expression(document.body.clientWidth>600?"600px":"auto");
 overflow:hidden;
}

　◎ max-width:600px; 在IE7、FF等其他非IE瀏覽器下最大寬度為600px。但在IE6中無效。

　◎ width:600px; 在所有瀏覽器中圖片的大小為600px;

　◎ 當圖片大小大于600px，自動縮小為600px。在IE6中有效。

　◎ overflow:hidden; 超出的部分隱藏，避免控制圖片大小失敗而引起的撐開變形。