溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用javascript來(lái)編寫(xiě)動(dòng)態(tài)Html

發(fā)布時(shí)間：2021-08-07 17:37:16 來(lái)源：億速云 閱讀：154 作者：chen 欄目：開(kāi)發(fā)技術(shù)

本篇內(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”吧!

 現(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><!--
.red {color:red}
.blue {color:blue}
-->
</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è)樣式類，然后在change_text()函數(shù)中對(duì)調(diào)用該函數(shù)的對(duì)象進(jìn)行樣式類的改變，從而達(dá)到顏色的變換，關(guān)鍵語(yǔ)句在于window.event.srcElement.className="樣式類名"，此語(yǔ)句能使當(dāng)前調(diào)用函數(shù)的對(duì)象的className屬性改變，若class="red"，當(dāng)調(diào)用change_text()函數(shù)時(shí)，其className="blue"，它的樣式類也就變成了“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è)樣式類“first”和“l(fā)ater”，first類中的文本修飾是none，既沒(méi)有修飾，而later的文本修飾是underline，及下加一條直線，并且，later類中還出現(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í)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手