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.
.ie
6
-hover input:hover, .ie
6
-hover .h {
02.
border
:
1px
solid
red
;
03.
}
04.
.enable-ie
6
-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.
.ie
6
-line-height-bug {
background
:
#f2f2f2
;
line-height
:
50px
; zoom:
1
; }
02.
.ie
6
-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.
}