本篇內(nèi)容主要講解“如何使用javascript來編寫動(dòng)態(tài)Html”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何使用javascript來編寫動(dòng)態(tài)Html”吧!
現(xiàn)在我們開始使用javascript來編寫動(dòng)態(tài)Html，javascript是一種腳本語言，使用起來就象是在編寫程序一樣。實(shí)際上，我們只要在Html文件中加入標(biāo)志對，便可以在標(biāo)志對中進(jìn)行編寫了。
例 使用鼠標(biāo)觸發(fā)事件和動(dòng)態(tài)樣式表改變文本
例中在標(biāo)志對中定義了函數(shù)change_text()，當(dāng)此函數(shù)被調(diào)用時(shí)，它將對對象Dragon的style屬性中的color屬性進(jìn)行判斷，若其顏色值等于“Red”，則將其color值變?yōu)椤癎reen”（document.all.Dragon.style.color="Green"的作用），否則將其color值變?yōu)椤癛ed”（document.all.Dragon.style.color="Red"的作用）。而對change_text()函數(shù)的調(diào)用是在
標(biāo)志對中進(jìn)行的，id="Dragon"定義了標(biāo)志對的對象名為Dragon，onmouseover和onmouseout都調(diào)用了change_text()函數(shù)，因此只要onmouseover或onmouseout事件觸發(fā)，都會(huì)執(zhí)行change_text()函數(shù)，于是便改變了Dragon的屬性，即當(dāng)鼠標(biāo)移動(dòng)到或離開文本“我是變色龍”時(shí)，此文本的顏色將在紅色（Red）和綠色（Green）之間變換。Document指代的是上例自身這個(gè)Html文檔，all指代的是此Html文檔的全部對象。現(xiàn)在看起來要使網(wǎng)頁動(dòng)起來已經(jīng)變得簡單多了。細(xì)心的讀者會(huì)發(fā)現(xiàn)例6的局限性，因?yàn)閏hange_text()函數(shù)只能對Dragon對象進(jìn)行顏色變換，若您想對一系列對象的文本（如列表中的每一行文本）進(jìn)行顏色變換將會(huì)使代碼增加。不用擔(dān)心，我們馬上解決。為了讓change_text()函數(shù)更具有通用性，我把CSS樣式單與javascript相結(jié)合，這將更加簡單而且方便。
例 CSS樣式單與javascript相結(jié)合改變文本
從上例中可以看到，我在CSS樣式單中定義了red和blue兩個(gè)樣式類，然后在change_text()函數(shù)中對調(diào)用該函數(shù)的對象進(jìn)行樣式類的改變，從而達(dá)到顏色的變換，關(guān)鍵語句在于window.event.srcElement.className="樣式類名"，此語句能使當(dāng)前調(diào)用函數(shù)的對象的className屬性改變，若class="red"，當(dāng)調(diào)用change_text()函數(shù)時(shí)，其className="blue"，它的樣式類也就變成了“blue”。
也許您會(huì)因?yàn)橐獙γ恳恍形谋驹黾觨nmouseover和onmouseout事件而覺得麻煩，不要緊，我馬上來搞定這個(gè)麻煩問題。下邊是一個(gè)效果不錯(cuò)的DHtml，請仔細(xì)閱讀。
例 對列表進(jìn)行動(dòng)態(tài)變換
本例中的特別之處在于藍(lán)色字部分。CSS樣式單首先定義了
標(biāo)志對的樣式（body {font-family:"宋體";font-size:9pt}），然后定義了另外兩個(gè)樣式類“first”和“l(fā)ater”，first類中的文本修飾是none，既沒有修飾，而later的文本修飾是underline，及下加一條直線，并且，later類中還出現(xiàn)了cursor屬性，其值為hand，即是網(wǎng)頁中鼠標(biāo)移到超級(jí)鏈結(jié)是出現(xiàn)的小手。除了小手外，cursor還可以取其它的值：default、hand、move、crosshair、text、wait、help、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、e-resize和ne-resize等。注意到語句 document.onmouseover=change_text;和document.onmouseout=change_text;只就是我們解決上邊提到的問題的關(guān)鍵語句，它們代替了Html文檔中所有的onmouseover和onmouseout事件。
到此，相信大家對“如何使用javascript來編寫動(dòng)態(tài)Html”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
重慶分公司
重慶分公司
