Internet Explorer Behaviors它是什么？Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。 为什么要避免它？只有 Internet Explorer 支持 behavior 属性。 用什么代替？请使用 JavaScript 和 HTML DOM 取而代之。 例子 1 - Mouseover Highlight下面的 HTML 文件中有一个 <style> 元素，它为 <h1> 元素定义了一个行为： <html>
# P* m/ D# L* J<head>, Z5 d+ z6 a+ X# h, ^
<style type="text/css">
! f! h; c' g/ T5 ^4 g" G6 rh1 { behavior: url(behave.htc) }
/ f5 r. t* B, G+ b' Z. I$ z</style>
# X$ A& ~# J; _! Y3 u' V/ B1 b</head>
% J V8 Q/ u7 W$ z- D* o& Q6 M4 Y! Q
<body>+ V" ^4 U! m8 U9 |1 o! V) x, v. Y
<h1>Mouse over me!!!</h1>. t, I1 j) \% I$ z" `$ Y' c
</body>
0 v$ y+ T+ }! |4 x, I</html>下面是 XML 文档 "behave.htc"： <attach for="element" event="onmouseover" handler="hig_lite" />% ?) r5 m* h, ^' p
<attach for="element" event="onmouseout" handler="low_lite" />
. E0 g, {5 h5 g V+ x; I- j, X* A. c: t5 ~- u$ B
<script type="text/javascript">
, f; Q0 S- W9 D! n+ rfunction hig_lite()$ i6 [) t( `2 [. ?$ v' F; Y* ^
{+ I: x! R0 ^. N9 w$ u
element.style.color='red';
+ \/ a5 l, H# y0 y6 Q2 k}
# _& F5 S! R, Y. R4 r/ }, Y
# d3 d4 z, i1 p. c4 {2 B# D* Sfunction low_lite()
7 u: Y' X" c* F{2 O, I! a t; ~+ s! {8 i8 \9 _- @
element.style.color='blue';, M; ]0 S; D& L+ `% t- D7 F6 b. {
}' |# l- X: a: y' R% \. ~
</script>behavior 文件包含了针对元素的 JavaScript 和 事件句柄。 如果您使用 Internet Explorer，可以亲自试一下（把鼠标放在例子中的文本上）。 例子 2 - Typewriter Simulation下面的 HTML 文件中有一个 <style> 元素，它为 id 为 "typing" 的元素定义了一个行为： <html>9 U/ C( G. m& x$ V( P! h6 Q
<head>; o/ X+ Y$ m$ @& |# e" @% D8 j
<style type="text/css">
B; m# C; |8 [8 P5 r" Y/ i#typing
' {; b0 E* o- _{
/ k3 y/ Z; {) N$ i! }behavior:url(behave_typing.htc);
/ y+ U, D1 i4 B0 v' I: ~font-family:'courier new';# P8 h& @5 P; \0 V5 e7 w8 O, r
}
) \* _- s4 h* D</style>; F5 Q7 ?5 U; ?: \
</head>
/ m& _7 F+ `, M9 |. G- t
$ O) y1 P5 T' z; ^8 {<body>* N& V; ^) i8 J, s& J1 K
<span id="typing" speed="100">IE5 introduced DHTML behaviors.
$ P& Z6 n! k7 C8 I1 }2 o) l2 mBehaviors are a way to add DHTML functionality to HTML elements
& N8 \+ ^# w. g% [, o( vwith the ease of CSS.<br /><br />How do behaviors work?<br />. P- s* n( a2 k' V: |
By using XML we can link behaviors to any element in a web page
8 Q! ]8 c' F& P u* ]. k# ]and manipulate that element.</p>
. y/ A" J8 W/ [& @" ?</span>
# a2 j2 ^; }: R</body>3 B0 `# U# ^5 p2 O6 W
</html>下面是 XML 文档 "behave.htc"： <attach for="window" event="onload" handler="beginTyping" />) I7 Z- K7 v2 d' {
<method name="type" />5 y! e6 A l& ~
+ G+ D+ a2 D2 @6 s' N# e7 \0 `<script type="text/javascript">
, q6 ?& V6 i/ r4 @var i,text1,text2,textLength,t;
) M1 _' |! Z) a0 g' @- N& `9 n8 n4 l9 F; w& J1 d8 ~, t
function beginTyping() ]8 K. Q3 {1 o
{& G' j& v- ]" [1 f4 }0 O' q* U' S K
i=0;) z G |, M* u H3 a9 {
text1=element.innerText;
2 |' d& Y2 S, F; B% G+ u( @textLength=text1.length;
8 t' P0 ^5 r2 _3 celement.innerText="";; A R/ M6 o. o$ ]; D$ X2 m3 k5 ?
text2="";" o2 d9 j6 L. Q& O, F4 ~
t=window.setInterval(element.id+".type()",speed);
- W: m. K$ e- r$ k3 y8 P}" I# [0 G8 o. C5 b8 h. ~& p
2 Q' [" d$ m/ r2 `
function type()( M2 O! H( n+ e. _
{' h1 U+ I) Q4 V' r- j: C
text2=text2+text1.substring(i,i+1); I% H, X# S& {" G
element.innerText=text2;# \% e5 q9 A$ R
i=i+1;8 l+ X& {0 D8 E0 @# Q' g4 N
if (i==textLength)) \0 g7 u. N+ R* C* C+ t3 X/ O7 N
{
. T4 l! ~: x: \, Y1 X% n. q- b6 e clearInterval(t);
6 `, o& t6 y4 r7 _) v }
% w* z( c6 a/ \/ O( m. f- E* W}/ L, |! z8 C0 k( Q+ f0 ]! V2 v
</script>如果您使用 Internet Explorer，可以亲自试一下。 |
发表于 11-28-2011 05:43