CSS expression usage Summary

From http://www.chencheng.org/demo/css-expression.php

CSS expression, dynamic CSS attribute, ie private, introduced since 5.0 (IE8 will not be supported), refer to msdn, but sometimes it is good to use JavaScript to dynamically generate it as the hack of IE6!

Advantages:

• Allows CSS attributes to be dynamically generated, so basic JavaScript functions can be used.
• It is much easier to use the CSS selector to traverse a specific element than JS does.

Disadvantages:

• Expressions are executed repeatedly, causing serious efficiency problems. It does not seem to trigger through events, but through interval mechanisms.
• Other browsers do not support this function, and IE8 does not.

2. IE6 background flashing bug fix

   Body {ZOOM: expression(function(elemediac.exe ccommand ('backgroundcacache ', false, true); El. style. Zoom = '1' ;}( this ));}

4. Assign different styles to input of Different Types

   Input {ZOOM: expression (function (EL) {El. style. Zoom = "1"; El. classname? El. classname + = "" + El. Type: El. classname = El. type;} (this ));}

6. Transform the line color (zebra lists)

   . Test {Unicode-bidi: expression (function (EL) {el. style. unicodebidi = "normal"; var Childs = el. getelementsbytagname ("Li"); For (VAR I = 0; I <Childs. length; I ++) {(I % 2 )? Childs [I]. classname + = "even": Childs [I]. classname + = "odd" ;}} (this ));}

8. Simulate: Before or: After

   . Test {letter-Spacing: expression (function (EL) {el. style. letterspacing = "0"; var newchild = document. createelement ("span"); newchild. classname = "after"; newchild. appendchild (document. createtextnode ("world! "); El. appendchild (newchild);} (this ));}

9. Simulated image: Max-width and max-height (or Min-width and Min-height)
   

   
   
   
   

   . max-width span IMG {max-width: 120px; max-Height: 120px; ZOOM: expression (function (EL) {el. style. zoom = "1"; var resizeimg = function () {If (El. width & gt; 120 | el. height> 120) {If (El. width> el. height) {el. width = "120"; El. height = el. height * (El. width/120);} else {el. height = "120"; El. width = el. width * (El. height/120) ;}} if (El. complete) {resizeimg ();} else {el. onload = function () {resizeimg () ;}}( this) ;}

11. IE6: hover
    

    . ie6-hover input: hover ,. ie6-hover. h {border: 1px solid red ;}. enable-ie6-hover input {_ ZOOM: expression (function (EL) {el. style. zoom = "0"; El. onmouseenter = function () {el. classname = "H" ;}; el. onmouseleave = function () {el. classname = "" ;};}( this) ;}

13. line-height bug in IE6
    

    BUG:

    fixed:

    . ie6-line-height-bug {Background: # f2f2f2; line-Height: 50px; ZOOM: 1 ;}. ie6-line-height-bug-fixed input {_ ZOOM: expression (function (EL) {el. style. zoom = "1"; var iefixer = document. createelement ("B"); iefixer. style. zoom = 1; El. parentnode. insertbefore (iefixer, El) ;}( this) ;}