转自http://www.chencheng.org/demo/css-expression.php
CSS Expression,动态 CSS 属性,IE 私有,自 5.0 开始引入(IE8 将不再支持),参考 MSDN,不过有时用javascript动态生成它作为IE6的hack还是不错的!
这东西的优点:
- 使 CSS 属性动态生成,所以基本 js 能干的它都能干
- 使用 CSS 选择符,比 js 遍历到某个特定元素要方便得多
这东西的缺点:
- expression 会反复执行,有严重的效率问题。它的触发似乎不是通过事件,而是通过 interval 一类的机制。
- 别的浏览器不支持,IE8 也将不再支持
- IE6 的背景闪烁 Bug Fix
body { zoom: expression(function(el){ document.execCommand('BackgroundImageCache', false, true); el.style.zoom = '1'; }(this)); }
- 给不同 type 的 input 赋予不同的样式
input { zoom: expression(function(el){ el.style.zoom = "1"; el.className ? el.className+=" "+el.type : el.className=el.type; }(this)); }
- 隔行换色(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)); }
- 模拟 :before 或者 :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)); }
- 模拟图片的:max-width 和 max-height (或 min-width 和 min-height)
.max-width span img { max-120px; max-height:120px; zoom:expression(function(el){ el.style.zoom = "1"; var resizeImg = function() { if (el.width > 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)); }
- 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)); }
- IE6下的line-height bug
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)); }