CSS Expression用法总结

来源：互联网发布：手机助手 mac 编辑：程序博客网时间：2024/06/14 16:13

CSS Expression用法总结

转自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
1.body {
2.    zoom: expression(function(el){
3.    document.execCommand('BackgroundImageCache', false, true);
4.    el.style.zoom = '1';
5.    }(this));
6.}
给不同 type 的 input 赋予不同的样式
1.input {
2.    zoom: expression(function(el){
3.        el.style.zoom = "1";
4.        el.className ? el.className+=" "+el.type : el.className=el.type;
5.    }(this));
6.}
隔行换色（zebra lists）
01..test {
02.    unicode-bidi: expression(function(el){
03.        el.style.unicodeBidi = "normal";
04.        var childs = el.getElementsByTagName("li");
05.        for(var i=0; i<childs.length; i++){
06.            (i % 2)?childs[i].className+=" even":childs[i].className+=" odd";
07.        }
08.    }(this));
09.}
模拟 :before 或者 :after
01..test {
02.    letter-spacing: expression(function(el){
03.        el.style.letterSpacing = "0";
04.        var newchild = document.createElement("span");
05.        newchild.className="after";
06.        newchild.appendChild(document.createTextNode(" World!"));
07.        el.appendChild(newchild);
08.    }(this));
09.}
模拟图片的：max-width 和 max-height (或 min-width 和 min-height)

01..max-width span img {
02.    max-width:120px;
03.    max-height:120px;
04.    zoom:expression(function(el){
05.        el.style.zoom = "1";
06.
07.        var resizeImg = function() {
08.            if (el.width > 120 || el.height > 120) {
09.                if (el.width > el.height) {
10.                    el.width = "120";
11.                    el.height = el.height * (el.width / 120);
12.                } else {
13.                    el.height = "120";
14.                    el.width = el.width * (el.height / 120);
15.                }
16.            }
17.        }
18.
19.        if (el.complete) {
20.            resizeImg();
21.        } else {
22.            el.onload = function() {
23.                resizeImg();
24.            }
25.        }
26.    }(this));
27.}
IE6的:hover

01..ie6-hover input:hover, .ie6-hover .h {
02.    border:1px solid red;
03.}
04..enable-ie6-hover input {
05.    _zoom:expression(function(el){
06.        el.style.zoom = "0";
07.        el.onmouseenter = function() {
08.            el.className = "h";
09.        };
10.        el.onmouseleave = function() {
11.            el.className = "";
12.        };
13.    }(this));
14.}
IE6下的line-height bug
bug:
fixed:
01..ie6-line-height-bug { background:#f2f2f2; line-height:50px; zoom:1; }
02..ie6-line-height-bug-fixed input {
03.    _zoom: expression(function(el){
04.        el.style.zoom = "1";
05.        var iefixer = document.createElement("b");
06.        iefixer.style.zoom = 1;
07.        el.parentNode.insertBefore(iefixer, el);
08.    }(this));
09.}