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 属性, 如果我的代码没有 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>

 

 

搞定, 收工