CSS中expression使用简介——IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。
5 p: q1 p; O: r" _-----------------------------------------------------------------------
: J j- ]" @/ B. k3 ]- w: Z+ w
定义
2 U6 l6 v$ u6 A4 a8 L+ S9 _' H5 k
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
( w5 y2 v- y) g6 l# m; }+ T+ x, {
: b: Z+ v' ]& e8 D: C4 k; Z 给元素固有属性赋值
6 r' `9 F# @$ z% T, n: ?. D- Z- x: q5 d/ r
例如，你可以依照浏览器的大小来安置一个元素的位置。
0 y" l) U, m/ p2 f6 T. S- V9 R& b$ z3 {6 p+ S
#myDiv {
) v P5 C4 g4 k3 S# k) F2 ^& i
position: absolute;
* h5 n( l7 T) @( U3 q: W f- jwidth: 100px;
1 A @5 C" }: V( q; i' f/ Theight: 100px;
2 c- _8 V) ?- o; h3 J
left: expression(document.body.offsetWidth - 110 + "px");
6 V& Y; i/ y1 o; D% @top: expression(document.body.offsetHeight - 110 + "px");
; d- f$ m7 D$ Q' f8 ~% E7 L
background: red;
! @# l% d1 {' H- E1 n}
# m' d x8 p9 k
5 v2 ]9 j! Y1 `( u; E, z9 ? 给元素自定义属性赋值
2 @9 G/ o. r+ d
9 l4 q: N1 O" A% H0 p' x 例如，消除页面上的链接虚线框。 通常的做法是：
" F1 l9 ^, Y! B' t" X
0 p1 p0 S7 Y: Q$ `5 Z2 b<a href="link1.htm" onfocus="this.blur()">link1</a>
# e: C6 x1 m+ {7 `4 n7 K* ~<a href="link2.htm" onfocus="this.blur()">link2</a>
& C( k2 k) f: A<a href="link3.htm" onfocus="this.blur()">link3</a>
0 s7 t3 R& D! K. j/ U0 O
; Y! ?% O( H' v' r7 u( [& i 粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？
7 ]% a% ]5 a; n/ H- Y# F; _! M, z
- Q3 H. E8 a& r% Z" S% w3 X- p 采用expression的做法如下：
1 T) ^6 ]/ ~& u+ d3 _- Z
& G+ e1 s* A& Y3 g<style type="text/css">
) h' j: y8 q4 o% u: n% wa {star : expression(onfocus=this.blur)}
5 E4 M( @6 E G: Q' N6 m
</style>
: h% _% t1 f4 ]: K% x<a href="link1.htm">link1</a>
/ w. O9 t2 q/ J6 F# g; e<a href="link2.htm">link2</a>
& f, L4 B$ d* o4 l7 n. \5 |<a href="link3.htm">link3</a>
9 p2 r( v. u( R5 k' W
0 I" K- ]7 |) a8 z1 G
说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非s cript内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为
* \2 r% }- ]/ A& k; _: X2 o5 G
: V2 _6 j7 T2 i
<style type="text/css">
. B$ [6 F, Y" x. `% w) Binput
9 s. q: _7 K' y! t4 M, { ~
{star : expression(onmouseover=this.style.backgroundColor="#FF0000";
& r" _1 K7 s* }+ r, W) I5 B1 f0 x
onmouseout=this.style.backgroundColor="#FFFFFF")}
* V9 l9 Q5 s; Y. \7 N
</style>
2 G+ E; p& L' t. Q n- u<style type="text/css">
: | y/ X S, K% |" }9 G, D: _input {star : expression(onmouseover=this.style.backgroundColor="#FF0000";
# C3 k. P3 J- U9 f5 ionmouseout=this.style.backgroundColor="#FFFFFF")}
* s6 i& E/ g0 X& N r
</style>
% z$ ^# t1 c: @/ s$ Q$ p
<input type="text">
1 A e6 }/ m/ q, o+ E<input type="text">
8 V: l' C& w1 j6 F9 \7 ^<input type="text">
+ l2 j" z$ r: w5 `. |5 w5 X. B4 e, {& [) H3 ? F8 V
可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：
. ?0 D8 z- J* M" Q. F
* c1 y2 K0 j- h<style type="text/css">
8 c) G0 ^& I7 T' K
input {star : expression(onmouseover=function()
( G! }$ q0 S$ I t3 p{this.style.backgroundColor="#FF0000"},
6 t( [, d$ [2 }- w, s
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
8 u# T2 ~" t4 K* k( Z4 _</style>
$ q* m* \7 c/ I, d# f8 c<input type="text">
/ o% f) {6 M, a! x- d
<input type="text">
4 O4 v1 R1 j( ^$ t6 J2 a<input type="text">
2 q* ^% ^& ?0 h- Y( X- ^0 |
% O! P" G9 A! ^, j8 M5 z
注意
. M" \% t% K" ?
8 A5 [7 E( \5 c( q
不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高。
