CSS Expression,动态 CSS 属性,IE 私有,自 5.0 开始引入(IE8 将不再支持),参考 MSDN。
这东西的优点:
- 使 CSS 属性动态生成,所以基本 js 能干的它都能干
- 使用 CSS 选择符,比 js 遍历到某个特定元素要方便得多
这东西的缺点:
- expression 会反复执行,有严重的效率问题。它的触发似乎不是通过事件,而是通过 interval 一类的机制。
- 别的浏览器不支持,IE8 也将不再支持
那现在翻出来干嘛呢?因为我发现,第一个缺点是可以解决的。方法就是,在 expression 语句体里面,将触发该 expression 的 css 属性重置。比如 body{ zoom: expression(function(ele){ele.style.zoom = "1"; alert("xx");}(this));},执行这段 CSS 会发现,alert 只跑了一次。具体可以看我上一个关于解决背景闪烁问题的帖子。
所以,解决了 expression 的效率问题,就完全可以在实战中用上了。使用时只要用一个无关紧要的 CSS 属性做触发,比如 zoom, 比如 letter-spacing,比如 unicode-bidi,等等等等,触发完了重置回默认值。可以玩的很多,我来写几个实际应用中经常会遇到的问题:
给不同 type 的 input 赋予不同的样式
支持 CSS2 选择符的可以使用属性选择符,IE 则可以用 expression 给 input 加上不同 type 对应的 class:(这个例子在经典贴过)
input{
zoom: expression(function(ele){
ele.style.zoom = "1";
(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type;
}(this));
}
input[type="text"]{ border: 1px solid red;}
input.text{border: 1px solid red;}
input[type="button"]{ border: 1px solid blue;}
input.button{border: 1px solid blue;}
演示 1,这个还可以再发散发散,比如加上 :checked,:disabled 等等,改表单样式不愁啦~
隔行换色(zebra lists)
支持 CSS3 选择符的可以直接上 nth-child(webkit,opera 都支持,马上要发布的 firefox3.1 也支持),IE 则可以通过 expression 加上 odd 或 even 的 class:
.test{
unicode-bidi: expression(function(ele){
ele.style.unicodeBidi = "normal";
var childs = ele.getElementsByTagName("li");
for(var i=0; i<childs.length; i++){
(i % 2)?childs[i].className+=" even":childs[i].className+=" odd";
}
}(this));
}
.test li.odd{background: #CCC;}
.test li.even{background: #EEE;}
.test li:nth-child(odd){
background: #CCC;
}
.test li:nth-child(even){
background: #EEE;
}
演示 2 (IE5+,Opera,Safari,Chrome,Firefox 3.1)
模拟 :before 或者 :after
Firefox 3.1 之后,:before 或者 :after 出来的东西可控的 CSS 属性更多了,比如 position/float,又有的玩了,不像以前基本废柴,只拿来清除浮动……大材小用啊。
.test{
letter-spacing: expression(function(ele){
ele.style.letterSpacing = "0";
var newchild = document.createElement("span");
newchild.className="after";
newchild.appendChild(document.createTextNode(" World!"));
ele.appendChild(newchild);
}(this));
}
.test:after{
content: " World!";
color: red;
}
.test .after{color: red;}
演示 3
还有什么好玩的可以玩?想起来再来补充。