如何使用javascript來編寫動(dòng)態(tài)Html-創(chuàng)新互聯(lián)
本篇內(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文件中加入<script language="javascript"></script>標(biāo)志對(duì)，便可以在標(biāo)志對(duì)中進(jìn)行編寫了。
例 使用鼠標(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)到或離開文本“我是變色龍”時(shí)，此文本的顏色將在紅色（Red）和綠色（Green）之間變換。Document指代的是上例自身這個(gè)Html文檔，all指代的是此Html文檔的全部對(duì)象。
現(xiàn)在看起來要使網(wǎng)頁動(dòng)起來已經(jīng)變得簡單多了。細(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é)合，這將更加簡單而且方便。
例 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()">我是變色鳥！</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)鍵語句在于window.event.srcElement.className="樣式類名"，此語句能使當(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事件而覺得麻煩，不要緊，我馬上來搞定這個(gè)麻煩問題。下邊是一個(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ù)器頁面(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，既沒有修飾，而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事件。
到此，相信大家對(duì)“如何使用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í)！
網(wǎng)站標(biāo)題：如何使用javascript來編寫動(dòng)態(tài)Html-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://www.rwnh.cn/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)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 02-準(zhǔn)備實(shí)驗(yàn)環(huán)境-001-安裝VMwareWorkstation15-創(chuàng)新互聯(lián)
- 用遞歸函數(shù)和棧逆序一個(gè)棧（C++）-創(chuàng)新互聯(lián)
- nodejs中net模塊有什么用-創(chuàng)新互聯(lián)
- 如何批處理將字符串或日期輸出到Windows剪貼板-創(chuàng)新互聯(lián)
- SpringMVC表單標(biāo)簽使用詳解-創(chuàng)新互聯(lián)
- postgresqlLinux二進(jìn)制文件安裝-創(chuàng)新互聯(lián)
- php中安裝msgpack-php的的教程-創(chuàng)新互聯(lián)
- 池州網(wǎng)站建設(shè)模版好還是定制開發(fā)好 2023-08-27
- 做官網(wǎng)設(shè)計(jì)在未來有怎樣的作用？ 2022-05-02
- 六盤水網(wǎng)站優(yōu)化之頁面關(guān)鍵詞布局 2023-03-09
- SEO代碼優(yōu)化基礎(chǔ)和容易犯的錯(cuò)誤有哪些 2020-07-25
- 互聯(lián)網(wǎng)中的金融——“專注小賽道”的神話 2021-05-26
- 創(chuàng)新互聯(lián)營銷型網(wǎng)站導(dǎo)航優(yōu)化建議 2022-08-07
- 教你怎解決網(wǎng)站索引量下降的辦法！ 2023-04-23
- 重要微信聊天記錄別刪！5月1日起電子數(shù)據(jù)將正式成為打官司證據(jù) 2021-02-23
- 網(wǎng)站優(yōu)化怎么選擇優(yōu)化關(guān)鍵詞更能提升價(jià)值？ 2021-11-09
- 平頂山seo優(yōu)化:網(wǎng)站樣板文字的優(yōu)化 2022-05-06
- 網(wǎng)站怎么做才能流量倍增 2022-08-27
- 微信、微博盛行，企業(yè)還要不要官方營銷手機(jī)型網(wǎng)站 2022-08-06