CSS expression using JavaScript

Because IE6 does not support the CSS first-Child pseudo class, we try to solve the problem through the CSS expression. Of course, the CSS expression cannot be executed in Firefox, so basically both are written, and write them together.

 

The following is an example of hiding the first column of the table whose ID is mytable.

<Script language = "JavaScript" type = "text/JavaScript">

Function get_previussibling (N)
{
VaR x = n. previussibling;
If (x = NULL) return NULL;
While (X & X. nodetype! = 1)
{
X = x. previussibling;
}
Return X;
}
</SCRIPT>

 

 

<Style>

/* ------- This is for IE6 ---------*/
Table # mytable tbody tr TD {
Display: expression (function (EL ){
El. style. Display = (get_previussibling (EL )? 'Line': 'None ');
} (This ));
}

 

/* ------- This is for Firefox -------*/

Table # mytable tbody tr TD: First-child {
Display: none;
}
</Style>

 

 

My example above is a bit messy. Let's look at the following syntax (I wrote it myself without reference. If I wrote an error, please remind me, by lin49940)

 

TD {
Display: expression (function1 [, function2 [, ......])

}

 

Function1 and function2 are custom JS methods. Multiple Functions are added to multiple functions. They are separated by commas (,) and executed sequentially.

 

For example

<SCRIPT>

Function foo1 () {// The code must at least set the corresponding attribute}

Function foo2 (){}

</SCRIPT>

 

TD {
Display: expression (foo1 (), foo2 ());

}

 

If you do not want to execute foo2 (),

TD {
Display: expression (foo1 ());

}

 

Of course, if you don't want to write the function in <SCRIPT>, you can directly

TD {
Display: expression (

Function (EL ){
El. style. Display = (get_previussibling (EL )? 'Line': 'None ');
} (This ));

}

 

Function (EL) {} (this): Actually it is similar

Function Foo (STR ){
Alert (STR );
}
VaR foodemo = Foo;
Foodemo ("Hello World ");

The above is my understanding. Of course, you can not only pass this, but you can also pass other parameters.

 

In fact, many people have noticed that the CSS expression can be executed multiple times, and the memory consumption is high. The memory consumption is definite, but multiple executions may be code problems.

For example, I want to set the display attribute. If my code does not have El. style. Display = XXXX,

Or do I write somefunction ()? (El. style. display = XXXX) :( el. style. display = yyyy), so I am sorry to inform you that your page is waiting to be suspended. When you click the mouse and slide the scroll wheel, there will be continuous expression execution, thousands of entries, tens of thousands or even more. Check your memory.

Therefore, in your code, all operations are concentrated in a function, and you only need El. style. Display = somefunction ().

 

Here is a piece of code that checks the number of expression executions. refer:

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

 

<Table border = 0 cellpadding = 0 cellspacing = 0>
<Tr>
<TD valign = middle> Number of expression executions:
<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. previussibling? 'Line': '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>

 

 

Get it done, close the work