八、 簡(jiǎn)單介紹CSS結(jié)合JS的運(yùn)用（針對(duì)事件動(dòng)作）
利用CSS配合Javascript的可以做很多更酷的動(dòng)態(tài)頁(yè)面效果，在本教程的最后給大家簡(jiǎn)單介紹一下CSS配合JS的應(yīng)用。首先，我們要搞清楚事件和動(dòng)作的概念。在客戶端腳本中，JavaScript 通過(guò)對(duì)事件進(jìn)行響應(yīng)來(lái)獲得與用戶的交互。例如，當(dāng)用戶單擊一個(gè)按鈕或者在某段文字上移動(dòng)鼠標(biāo)時(shí)，就觸發(fā)了一個(gè)單擊事件或鼠標(biāo)移動(dòng)事件，通過(guò)對(duì)這些事件的響應(yīng)，可以完成特定的功能（例如，單擊按鈕彈出對(duì)話框，鼠標(biāo)移動(dòng)到文本上后文本變色等）。 下面介紹幾種常見(jiàn)的事件（還用更多事件，請(qǐng)查閱相關(guān)資料）：
onClick：鼠標(biāo)單擊事件。（是指鼠標(biāo)按下，然后松開(kāi)時(shí)產(chǎn)生。）
onDblClick：鼠標(biāo)雙擊事件。（是指鼠標(biāo)快速按下，松開(kāi)，并再次按下時(shí)產(chǎn)生。）
onMouseDown：鼠標(biāo)按下事件。（鼠標(biāo)按下時(shí)即產(chǎn)生。）
onMouseUp：鼠標(biāo)釋放事件。（是指鼠標(biāo)從按下的狀態(tài)到彈起。）
onMouseMove：鼠標(biāo)移動(dòng)事件。（是指在特定元素上移動(dòng)鼠標(biāo)。） onMouseOver：鼠標(biāo)經(jīng)過(guò)事件。（是指，當(dāng)指針從外界往元素上移動(dòng)時(shí)產(chǎn)生。）
onMouseOut：鼠標(biāo)離開(kāi)事件。（是指鼠標(biāo)從特定元素上離開(kāi)時(shí)產(chǎn)生。）
onLoad：載入事件。（當(dāng)圖象或頁(yè)面結(jié)束載入時(shí)產(chǎn)生。）
onUnload：卸載事件。（當(dāng)訪問(wèn)者離開(kāi)頁(yè)面時(shí)產(chǎn)生。）
onScroll：滾動(dòng)條滾動(dòng)事件。（當(dāng)訪問(wèn)者使用卷軸上移或下移時(shí)產(chǎn)生。）
有了事件以后，我們就為事件加上動(dòng)作。這里只說(shuō)改變當(dāng)前元素自定義樣式的動(dòng)作，我們可以用這個(gè)方法先設(shè)定好兩個(gè)自定義的CSS樣式，對(duì)象原先調(diào)用第一種樣式，當(dāng)產(chǎn)生鼠標(biāo)事件時(shí)讓對(duì)象應(yīng)用到第二種CSS樣式，而產(chǎn)生的鼠標(biāo)效果，看下面這個(gè)例子。
在網(wǎng)頁(yè)中插入一個(gè)圖象，自定義一個(gè)“.out”樣式，用gray濾鏡使圖片變成黑白的：

將這個(gè)自定義樣式應(yīng)用到圖片上，在瀏覽器中預(yù)覽到圖片變成了黑白，我們?cè)俣x一個(gè)樣式“.over”，這個(gè)樣式?jīng)]有任何內(nèi)容，是空樣式，樣式表代碼如下：
<style type="text/css">
<!--
.over {}
.out {filter: Gray}
-->
</style>
然后在圖片標(biāo)記（IMG）里加上“onMouseOver="this.className='over'" onMouseOut="this.className='out'"”，意思為當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，圖片為over樣式，即彩色正常圖象；當(dāng)鼠標(biāo)離開(kāi)時(shí)，圖片為out樣式，即黑白圖象。oMouseOver和onMouseOut是鼠標(biāo)事件，this.className=”…”表示當(dāng)前對(duì)象的class名為…，注意大小寫(xiě)不要寫(xiě)錯(cuò)，JS對(duì)大小寫(xiě)非常敏感。
這樣這個(gè)效果就完成了，保存后在瀏覽器里打開(kāi)，圖象是黑白的，當(dāng)鼠標(biāo)移上去時(shí)，圖象變成彩色，鼠標(biāo)離開(kāi)時(shí)，圖象又變回黑白。只要發(fā)揮你的想象，通過(guò)this.className方法還可以做出很多好看的鼠標(biāo)效果。
到這里，所有css教程的內(nèi)容就都講完了，希望大家在學(xué)習(xí)中能靈活運(yùn)用屬性及方法，深刻理解規(guī)律和概念。