Internet Explorer Behaviors
它是什么？Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。
为什么要避免它？只有 Internet Explorer 支持 behavior 属性。
用什么代替？请使用 JavaScript 和 HTML DOM 取而代之。
例子 1 - Mouseover Highlight
下面的 HTML 文件中有一个 <style> 元素，它为 <h1> 元素定义了一个行为：
<html>
9 k" U# s5 b7 o, o5 u/ L) P7 w _<head>
, q+ F8 w3 Q, P6 w9 s( w! z<style type="text/css">% @2 u: Z0 w+ X! A. D) w
h1 { behavior: url(behave.htc) }% N2 t6 R2 M5 P' K! r
</style>
) M# q. |* P% V! \6 S7 {</head>
! S: K! c: h& _% Y& J4 D/ r# }
) J( f$ ?% l7 P$ w<body>- q' f. ?3 P! C
<h1>Mouse over me!!!</h1>
5 M/ S0 N0 y7 I! U) g4 E. Y</body>! y# ^- H4 m" a2 ~; W) q
</html>下面是 XML 文档 "behave.htc"：
<attach for="element" event="onmouseover" handler="hig_lite" />
) Z: P* l/ O- E* X! j<attach for="element" event="onmouseout" handler="low_lite" />/ y& ~; b6 N" t6 n6 ^* o# ~
) ]9 |* x* d I2 o<script type="text/javascript">
( e0 ` R3 R d3 g8 C9 ffunction hig_lite()7 _# d: g3 S) r9 O2 f
{
% I" W6 ^! E7 W( [( A# G2 y9 qelement.style.color='red';
7 R; G6 L9 a* s, G}4 u' n" }( r% K# h/ D! f
l6 u2 y$ e- a4 Z7 s
function low_lite()
t- l$ J h2 \ l. t1 g{& i" t/ p7 h5 B' S( k
element.style.color='blue';0 m$ i' A* X. m, I: G9 t3 q
}
1 [6 `/ [. d! J/ z</script>behavior 文件包含了针对元素的 JavaScript 和 事件句柄。
如果您使用 Internet Explorer，可以亲自试一下（把鼠标放在例子中的文本上）。
例子 2 - Typewriter Simulation
下面的 HTML 文件中有一个 <style> 元素，它为 id 为 "typing" 的元素定义了一个行为：
<html>" k# n( C& h) } R
<head>& x$ j; F+ k6 Q
<style type="text/css">$ C+ W9 S' y" f* ~! ]* h
#typing
! G% m; n6 c2 V/ r{
* t- n" x2 J kbehavior:url(behave_typing.htc);
% W4 j$ d- I$ n1 x$ N" o! d) wfont-family:'courier new';
5 ^$ r4 L5 g- |, k) D7 q9 |3 T}8 e& ^/ H; g) o8 C4 f7 U
</style>3 X1 P8 T: i% M" T7 X
</head>9 G% C2 F2 M! W3 o* h
: s- R) [; \, x4 T- l5 j
<body>$ p8 Y6 I9 n- K" X9 K, k: X3 P# B
<span id="typing" speed="100">IE5 introduced DHTML behaviors.
* g! o0 ~7 J1 A& V/ `/ F- h& }Behaviors are a way to add DHTML functionality to HTML elements. Y5 ?4 [' ~5 x0 Z' A7 Z% q
with the ease of CSS.<br /><br />How do behaviors work?<br />4 n; m. Q$ s$ Y7 k" M: a! t2 ~
By using XML we can link behaviors to any element in a web page" c1 X2 f6 F2 x
and manipulate that element.</p>
6 X6 @+ F) g) W) v+ {/ N" }" m5 K</span>
. @0 T C+ @1 k' A</body>
/ v1 N% V* ]1 ^2 d; @' z</html>下面是 XML 文档 "behave.htc"：
<attach for="window" event="onload" handler="beginTyping" />6 c: ]5 }; W# x- V
<method name="type" />1 R9 @* E: c4 ~; E6 A
- a' T2 v7 s; M& u! A9 L2 H7 }
<script type="text/javascript">! b* O4 M% R* g! y+ f/ ]. Y
var i,text1,text2,textLength,t;
/ z$ c, \: b3 C# M9 g# T
% c: G g/ X, l h" U6 ifunction beginTyping()- G4 e3 b% F: b4 Z9 Y
{
9 ?, \8 s6 `3 K1 a7 Ni=0;
7 G. q6 c9 S1 ]% gtext1=element.innerText;4 g" P, \4 x6 x2 N; d: `/ S9 q
textLength=text1.length;' C- p0 w/ n7 ~/ Y+ v
element.innerText="";' ^8 q; |2 `2 v% @$ C: y
text2="";
- K) Q' d0 o: n) ]- ^9 Mt=window.setInterval(element.id+".type()",speed);1 T8 ^5 X, N: L7 k
}: B$ ^6 S2 c" w9 r3 \; ?( c+ y- y$ F
$ [# V5 b* P' y/ mfunction type()4 u+ l! ]$ r, a- |
{
. j' |$ l. K" }2 A+ O( o3 xtext2=text2+text1.substring(i,i+1);
: r* P4 i" `8 `element.innerText=text2;9 |# A! {: ~4 i+ q
i=i+1; I- k. v' Q- m: m
if (i==textLength)! ^3 x* c# |6 e, }+ _8 c2 ~# J8 j
{
* H6 A4 f9 ?' B& s4 S: d3 y clearInterval(t);, O# w+ [: k" u6 o
}/ t: M- d& o! @; }, w, {; I2 L0 i% H
}! m2 P& P# m6 n# Z
</script>如果您使用 Internet Explorer，可以亲自试一下。
发表于 11-28-2011 05:43