posts - 17, comments - 4, trackbacks - 0, articles - 0
            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

          CSS的expression

          Posted on 2007-09-21 09:40 愚人 閱讀(900) 評(píng)論(1)  編輯  收藏 所屬分類: Xhtml/css
          定義 
            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):
           1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
           2 <html xmlns="http://www.w3.org/1999/xhtml">
           3 <head>
           4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
           5 <title>css2.0 VS ie</title>
           6 <style type="text/css">
           7 <!--
           8 body {
           9     font-size: 12px;
          10     text-align: center;
          11     margin: 0px;
          12     padding: 0px;
          13 }
          14 #pic{
          15   margin:0 auto;
          16   width:800px;
          17   padding:0;
          18   border:1px solid #333;
          19   }
          20 #pic img{
          21     max-width:780px;
          22     myimg:expression(onload=function(){
          23     this.style.width=(this.offsetWidth > 780)?"780px":"auto"}
          24            );
          25     border:1px dashed #000;
          26     }
          27 -->
          28 </style>
          29 </head>
          30 <body>
          31 <div id="pic">
          32 <img src="http://desk.blueidea.com/DESK/NX100/koreaad_10/koreaad_10020.JPG" alt="感謝blueidea被我盜鏈圖片!"/><br/>
          33 <img src="http://www.blueidea.com/img/common/logo.gif
          34 " alt="感謝blueidea被我盜鏈圖片!"/>
          35 </div>
          36 </body>
          37 </html>


          百分比自適應(yīng):
           1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
           2 <html xmlns="http://www.w3.org/1999/xhtml">
           3 <head>
           4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
           5 <title>css2.0 VS ie</title>
           6 <style type="text/css">
           7 <!--
           8 body {
           9     font-size: 12px;
          10     text-align: center;
          11     margin: 0;
          12     padding: 0;
          13 }
          14 #pic{
          15   margin:0 auto;
          16   width:90%;
          17   padding:0;
          18   border:1px solid #333;
          19   }
          20 #pic img{
          21     max-width:80%;
          22     mywidth:expression(onload=function(){
          23 this.style.width=(this.offsetWidth >document.getElementById("pic").scrollWidth*8/10)? "80%": "auto" });
          24     border:1px dashed #000;
          25     }
          26 -->
          27 </style>
          28 </head>
          29 <body>
          30 <div id="pic">
          31 <h3>縮放窗口大小試試</h3>
          32 <img src="http://desk.blueidea.com/DESK/NX100/koreaad_10/koreaad_10020.JPG" alt="感謝blueidea被我盜鏈圖片!"/>
          33 <img src="http://www.blueidea.com/img/common/logo.gif
          34 " alt="感謝blueidea被我盜鏈圖片!"/>
          35 </div>
          36 </body>
          37 </html>


          提醒: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; 超出的部分隱藏,避免控制圖片大小失敗而引起的撐開變形。


          評(píng)論

          # re: CSS的expression  回復(fù)  更多評(píng)論   

          2008-03-31 22:31 by yes188
          http://yes188.qiikii.com/UI/yes188/yes188_1365__P1.shtml
          本網(wǎng)頁完全是用CSS控制大小,但是唯美中不足的就是有時(shí)候的圖片沒有加載CSS,沒有一點(diǎn)寬度!

          請(qǐng)問如何解決先讓IE加載CSS,然后再加載CSS控制的圖片.
          主站蜘蛛池模板: 漳浦县| 威远县| 和田市| 北海市| 新丰县| 互助| 呼和浩特市| 南华县| 陕西省| 宣城市| 卢龙县| 平安县| 蒙阴县| 临江市| 万盛区| 宣城市| 台南市| 金阳县| 邳州市| 开远市| 孙吴县| 昌吉市| 锡林浩特市| 贵南县| 绥中县| 双桥区| 勐海县| 房山区| 扎鲁特旗| 宜昌市| 冷水江市| 库尔勒市| 甘孜| 阿拉尔市| 苗栗市| 囊谦县| 和平县| 枣阳市| 成武县| 安泽县| 镇安县|