[分享] CSS初级教程-CSS结合JS的运用

利用CSS配合JavaScript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，要搞清楚事件和动作的概念。在客户端脚本中，JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件，通过对这些事件的响应，可以完成特定的功能(例如，单击按钮弹出对话框，鼠标移动到文本上后文本变色等)。0 ~3 |! A6 F( \: S/ J& p
, u* a3 |0 ]7 D/ J- g! \3 ^9 N
　　下面介绍几种常见的事件：
2 _" L  F) z+ w4 L1 {  K  ?( R/ @5 `! K7 d, l4 M7 @, e2 v. L
　　onClick：鼠标单击事件。(是指鼠标按下，然后松开时产生。)5 e8 q* B7 |: B1 K

& Y: i: Q* K* t0 b& k* F　　onDblClick：鼠标双击事件。(是指鼠标快速按下，松开，并再次按下时产生。)
" `  F0 S! `4 ^7 r5 d8 v
6 {- u! B, e- ~* P( i　　onMouseDown：鼠标按下事件。(鼠标按下时即产生。)
3 Y! z. S* r! K, F! r6 v/ L7 ?7 {3 J0 n  i
　　onMouseUp：鼠标释放事件。(是指鼠标从按下的状态到弹起。)% ~3 o3 d5 F4 t4 w/ G: T

" ~* z/ {( [! S' I$ Y, p$ k　　onMouseMove：鼠标移动事件。(是指在特定元素上移动鼠标。)* f; F/ k$ Q$ ?6 v5 S, h
  |! S) H* [5 M" _  }8 H
　　onMouseOver：鼠标经过事件。(是指，当指针从外界往元素上移动时产生。)( k- f; K9 E8 i' D) Q
: y  w" p: d+ ^: p- R- G5 f
　　onMouseOut：鼠标离开事件。(是指鼠标从特定元素上离开时产生。)
* y, B+ K# U1 l7 \  v
$ W1 R# E& z% }6 O　　onLoad：载入事件。(当图象或页面结束载入时产生。)8 ~( [; b( L: h" r1 s& e

3 G) }9 I: i0 T5 F. {　　onUnload：卸载事件。(当访问者离开页面时产生。)8 N" f( E5 q/ J

0 l; q, p  J8 a( j2 [0 x- j9 Q+ ]1 k　　onScroll：滚动条滚动事件。(当访问者使用卷轴上移或下移时产生。)
9 \. ~; F+ l9 T  T0 H
( m. b' Y/ t6 X8 {1 F$ [　　有了事件以后，我们就为事件加上动作。这里只说改变当前元素自定义样式的动作，我们可以用这个方法先设定好两个自定义的CSS样式，对象原先调用第一种样式，当产生鼠标事件时让对象应用到第二种CSS样式，而产生的鼠标效果。