如何使用javascript來編寫動態(tài)Html-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“如何使用javascript來編寫動態(tài)Html”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何使用javascript來編寫動態(tài)Html”吧!

成都創(chuàng)新互聯(lián)公司制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設(shè)計(jì),成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為1000+服務(wù),成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣服務(wù)!

現(xiàn)在我們開始使用javascript來編寫動態(tài)Html，javascript是一種腳本語言，使用起來就象是在編寫程序一樣。實(shí)際上，我們只要在Html文件中加入<script language="javascript"></script>標(biāo)志對，便可以在標(biāo)志對中進(jìn)行編寫了。

例使用鼠標(biāo)觸發(fā)事件和動態(tài)樣式表改變文本

<html>
<head>
<title>DHtml舉例6</title>
<script language="javascript">
function change_text(){
if(document.all.Dragon.style.color=="Red"){
document.all.Dragon.style.color="Green";
}
else
{
document.all.Dragon.style.color="Red";
}
}
</script>
</head>
<body>
<br>
<h4 id="Dragon" align="center" onmouseover="change_text()" onmouseout="change_text()">我是變色龍！</h4>
</body>
</html>

例中在<script language="javascript"></script>標(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)用是在<h4></h4>標(biāo)志對中進(jìn)行的，id="Dragon"定義了<h4></h4>標(biāo)志對的對象名為Dragon，onmouseover和onmouseout都調(diào)用了change_text()函數(shù)，因此只要onmouseover或onmouseout事件觸發(fā)，都會執(zhí)行change_text()函數(shù)，于是便改變了Dragon的屬性，即當(dāng)鼠標(biāo)移動到或離開文本“我是變色龍”時(shí)，此文本的顏色將在紅色（Red）和綠色（Green）之間變換。Document指代的是上例自身這個(gè)Html文檔，all指代的是此Html文檔的全部對象。

現(xiàn)在看起來要使網(wǎng)頁動起來已經(jīng)變得簡單多了。細(xì)心的讀者會發(fā)現(xiàn)例6的局限性，因?yàn)閏hange_text()函數(shù)只能對Dragon對象進(jìn)行顏色變換，若您想對一系列對象的文本（如列表中的每一行文本）進(jìn)行顏色變換將會使代碼增加。不用擔(dān)心，我們馬上解決。為了讓change_text()函數(shù)更具有通用性，我把CSS樣式單與javascript相結(jié)合，這將更加簡單而且方便。

例 CSS樣式單與javascript相結(jié)合改變文本

<html>
<head>
<title>DHtml舉例7</title>
<style>
</style>
<script language="javascript">
function change_text(){
if(window.event.srcElement.className=="red"){
window.event.srcElement.className="blue";
}
else
{
window.event.srcElement.className="red";
}
}
</script>
</head>
<body>
<br>
<h4 class="red" align="center" onmouseover="change_text()" onmouseout="change_text()">我是變色龍！</h4>
<h4 class="blue" align="center" onmouseover="change_text()" onmouseout="change_text()">我是變色鳥！</h4>
<h4 class="red" align="center" onmouseover="change_text()" onmouseout="change_text()">我是變色兔！</h4>
</body>
</html>

從上例中可以看到，我在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”。

也許您會因?yàn)橐獙γ恳恍形谋驹黾觨nmouseover和onmouseout事件而覺得麻煩，不要緊，我馬上來搞定這個(gè)麻煩問題。下邊是一個(gè)效果不錯(cuò)的DHtml，請仔細(xì)閱讀。

例對列表進(jìn)行動態(tài)變換

<html>
<head>
<title>DHtml舉例8</title>
<style>
body {font-family:"宋體";font-size:9pt}
.first {color:gray;text-decoration:none}
.later {cursor:hand;color:blue;text-decoration:underline}
</style>
<script language="javascript">
function change_text(){
if(window.event.srcElement.className=="first"){
window.event.srcElement.className="later";
}
else
{
window.event.srcElement.className="first";
}
}
document.onmouseover=change_text;
document.onmouseout=change_text;
</script>
</head>
<body>
<br>
<ul>
<li class=first > 動態(tài)Html(DHtml)
<li class=first > javascript
<li class=first > VBScript
<li class=first > 動態(tài)服務(wù)器頁面(ASP)
<li class=first > FrontPage98
<li class=first > InternetExplorer
<li class=first > SQL Server
</ul>
</body>
</html>

本例中的特別之處在于藍(lán)色字部分。CSS樣式單首先定義了<body></body>標(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)移到超級鏈結(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來編寫動態(tài)Html”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)站標(biāo)題：如何使用javascript來編寫動態(tài)Html-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://bm7419.com/article44/gdgee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站維護(hù)、網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站排名、關(guān)鍵詞優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容