愚人博客

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

　　給元素固有屬性賦值

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

#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> 

　　粗看或許還體現(xiàn)不出采用expression的優(yōu)勢(shì)，但如果你的頁面上有幾十甚至上百個(gè)鏈接，這時(shí)的你難道還會(huì)機(jī)械式地Ctrl+C，Ctrl+V么，何況兩者一比較，哪個(gè)產(chǎn)生的冗余代碼更多呢？

　　采用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之間可別忘了還有一個(gè)引號(hào)，因?yàn)閷?shí)質(zhì)還是CSS，所以放在style標(biāo)簽內(nèi)，而非s cript內(nèi)。OK，這樣就很容易地用一句話實(shí)現(xiàn)了頁面中的鏈接虛線框的消除。不過你先別得意，如果觸發(fā)的特效是CSS的屬性變化，那么出來的結(jié)果會(huì)跟你的本意有差別。例如你想隨鼠標(biāo)的移進(jìn)移出而改變頁面中的文本框顏色更改，你可能想當(dāng)然的會(huì)認(rèn)為應(yīng)該寫為 

<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">

　　可結(jié)果卻是出現(xiàn)腳本出錯(cuò)，正確的寫法應(yīng)該把CSS樣式的定義寫進(jìn)函數(shù)內(nèi)，如下所示：

<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，因?yàn)閑xpression對(duì)瀏覽器資源要求比較高。

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

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

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

/*替換圖片CSS*/
#imgScript {   /*這里使用對(duì)象ID來通配樣式, 也可以定義一個(gè)css函數(shù)*/
 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*/

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

固定像素適應(yīng):


百分比自適應(yīng)：


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



　網(wǎng)頁制作技巧實(shí)例解決：用CSS控制圖片自適應(yīng)大小

　　圖片自動(dòng)適應(yīng)大小是一個(gè)非常常用的功能，在進(jìn)行制作的時(shí)候?yàn)榱朔乐箞D片撐開容器而對(duì)圖片的尺寸進(jìn)行必要的控制，我們可不可以用CSS控制圖片使它自適應(yīng)大小呢？

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

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;

　◎ 當(dāng)圖片大小大于600px，自動(dòng)縮小為600px。在IE6中有效。

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