css expression 使用javascript 方法

由於 IE6 不支援css first-child 偽類, 所以試著通過 css 的 expression 來解決, 當然 css 的 expression 是不能在 FireFox 執行的, 所以基本上都是兩種都寫, 並且是寫在一起.

 

下面是一個把id為mytable 的表格的第一列隱藏的例子.

<SCRIPT LANGUAGE="javascript" type="text/javascript">

 function get_previoussibling(n) 
 { 
   var x=n.previousSibling;
   if(x == null) return null;
   while (x && x.nodeType!=1) 
    { 
      x=x.previousSibling;
    } 
   return x; 
 } 
</SCRIPT>  

 

 

 <style>

/*------- 這個是針對IE6的 ---------*/
 table#mytable tbody tr td{
      display: expression(function(el){
                                            el.style.display = (get_previoussibling(el)?'inline':'none');
                                     }(this) );
 }

 

 /*------- 這個是針對 FireFox 的 -------*/

 table#mytable tbody tr td:first-child{
  display:none;
 }
</style>

 

 

我上面的例子有點亂, 看看下面的文法(自己亂寫的, 沒參考資料, 如果寫錯, 請高手提醒, by lin49940)

 

 td{
  display: expression(function1[,function2[,...........]])

 }

 

 function1, function2 是自訂的 JS 方法, 有多個function 就加多個function, 他們中間用逗號 "," 隔開, 順序執行. 

 

如

<script>

      function foo1(){//裡面的代碼至少要設定對應的屬性}

      function foo2(){}

</script>

 

 td{
  display: expression(foo1(),foo2());

 }

 

 如果你不想執行 foo2(), 那就

 td{
  display: expression(foo1());

 }

 

 當然如果你不想把 function 寫在 <script> 裡面,  可以直接

 td{
  display: expression(

                          function(el){
                               el.style.display = (get_previoussibling(el)?'inline':'none');
                          }(this) );

 }

 

function(el){}(this):  其實就是類似

function foo(str){
      alert(str);
}
var fooDemo = foo;
fooDemo("hello world");

以上是個人理解, 當然你不止可以傳this了, 你有其他參數也可以傳的.

 

其實, 很多人都注意到了css 的 expression 可以會多次執行, 並且耗記憶體多, 耗記憶體這個是確定的, 但是多次執行是可能是代碼的問題了.

如, 我是要設定 display 屬性, 如果My Code沒有 el.style.display = XXXX,

             或者我寫做 someFunction()?(el.style.display = XXXX):(el.style.display = YYYY), 那我很抱歉的通知您, 你的頁面等著假死吧,  在你點滑鼠, 滑滾輪的時候, 會有不斷的 expression 執行, 幾千條, 幾萬條, 甚至更多, 看看你的記憶體吧.

所以, 在你的代碼中, 所有操作集中在一個 function 裡面, 最後只需要 el.style.display = someFunction().

 

這裡附帶一段檢查 expression 執行次數的代碼, 參考自:

http://stevesouders.com/hpws/onetime-expressions.php

 

<table border=0 cellpadding=0 cellspacing=0>
  <tr>
    <td valign=middle>Expression 執行次數:
      <input type=text size=10 id=cntrdisp disabled>
    </td>
  </tr>
</table>

 

<script>
var gnExpr = 0;
var gCntrDisplay;
var gbOn = true;

function setOnetimeBgcolor(elem) {
    elem.style.display = (elem.previousSibling?'inline':'none');
    //elem.style.backgroundColor = ( (new Date()).getHours()%2 ? "#F08A00" : "#B8D4FF" );
}

function setCntr() {
    gnExpr++;

    if ( gbOn ) {
 displayCntr();
    }

    return true;
}

function displayCntr() {
    if ( ! gCntrDisplay ) {
 gCntrDisplay = document.getElementById("cntrdisp");
    }

    if ( gCntrDisplay ) {
 gCntrDisplay.value = gnExpr;
    }
}

function setDisplay(bOn) {
    gbOn = bOn;
}

</script>

 

<style>
 td{
       display: expression( setCntr(), setOnetimeBgcolor(this) );
 }

 </script>

 

 

搞定, 收工