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

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

成都創(chuàng)新互聯(lián)公司制作網(wǎng)站網(wǎng)頁(yè)找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁(yè)設(shè)計(jì),成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),企業(yè)網(wǎng)站搭建,網(wǎng)站開(kāi)發(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ò)營(yíng)銷(xiāo)推廣服務(wù)!

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

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

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

例 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()">我是變色鳥(niǎo)！</h4>
<h4 class="red" align="center" onmouseover="change_text()" onmouseout="change_text()">我是變色兔！</h4>
</body>
</html>

從上例中可以看到，我在CSS樣式單中定義了red和blue兩個(gè)樣式類(lèi)，然后在change_text()函數(shù)中對(duì)調(diào)用該函數(shù)的對(duì)象進(jìn)行樣式類(lèi)的改變，從而達(dá)到顏色的變換，關(guān)鍵語(yǔ)句在于window.event.srcElement.className="樣式類(lèi)名"，此語(yǔ)句能使當(dāng)前調(diào)用函數(shù)的對(duì)象的className屬性改變，若class="red"，當(dāng)調(diào)用change_text()函數(shù)時(shí)，其className="blue"，它的樣式類(lèi)也就變成了“blue”。

也許您會(huì)因?yàn)橐獙?duì)每一行文本增加onmouseover和onmouseout事件而覺(jué)得麻煩，不要緊，我馬上來(lái)搞定這個(gè)麻煩問(wèn)題。下邊是一個(gè)效果不錯(cuò)的DHtml，請(qǐng)仔細(xì)閱讀。

例對(duì)列表進(jìn)行動(dòng)態(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 > 動(dòng)態(tài)Html(DHtml)
<li class=first > javascript
<li class=first > VBScript
<li class=first > 動(dòng)態(tài)服務(wù)器頁(yè)面(ASP)
<li class=first > FrontPage98
<li class=first > InternetExplorer
<li class=first > SQL Server
</ul>
</body>
</html>

本例中的特別之處在于藍(lán)色字部分。CSS樣式單首先定義了<body></body>標(biāo)志對(duì)的樣式（body {font-family:"宋體";font-size:9pt}），然后定義了另外兩個(gè)樣式類(lèi)“first”和“l(fā)ater”，first類(lèi)中的文本修飾是none，既沒(méi)有修飾，而later的文本修飾是underline，及下加一條直線，并且，later類(lèi)中還出現(xiàn)了cursor屬性，其值為hand，即是網(wǎng)頁(yè)中鼠標(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等。

注意到語(yǔ)句 document.onmouseover=change_text;和document.onmouseout=change_text;只就是我們解決上邊提到的問(wèn)題的關(guān)鍵語(yǔ)句，它們代替了Html文檔中所有的onmouseover和onmouseout事件。

到此，相信大家對(duì)“如何使用javascript來(lái)編寫(xiě)動(dòng)態(tài)Html”有了更深的了解，不妨來(lái)實(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來(lái)編寫(xiě)動(dòng)態(tài)Html-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://aaarwkj.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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

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

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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