麻辣家族討論版版's Archiver

小誌 發表於 2010-5-20 15:36

(教學第36篇) 堆疊 中篇

[color=darkorange][size=5][b]動態網頁內容[/b][/size][/color]
我們之前談過,要將資料輸出至網頁中,可以直接使用document物件的write方法,但僅止於網頁載入時將資料同時加到網頁文件中,一旦網頁文件被瀏覽器解析完成後,網頁版面就固定了,無法再使用document物件的write方法加入資料至網頁文件,或是修改網頁文件內容!

如果網頁文件被瀏覽器解析完成後,我們還要修正網頁文件中的內容那怎麼辦?網頁文件的主體元件及其子元件在Dynamic HTML卻有四個屬性可以存取及修正網頁文件版面的能力,這四個屬性分別是:innerHTML、innerText、outerHTML、outerText。
[table]
[tr][td=1,1,88][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]屬性[/size][/font][/font][/p][/td][td=1,1,428][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]說明[/size][/font][/font][/p][/td][/tr]
[tr][td=1,1,88][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]innerHTML[/size][/font][/color][/font][/p][/td][td=1,1,428][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]取得網頁標籤及網頁標籤包括的內容[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,88][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]innerText[/size][/font][/color][/font][/p][/td][td=1,1,428][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]取得網頁標籤包括的內容但不包含網頁標籤本身[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,88][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]outerHTML[/size][/font][/color][/font][/p][/td][td=1,1,428][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]修正網頁標籤及網頁標籤包括的內容[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,88][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]outerText[/size][/font][/color][/font][/p][/td][td=1,1,428][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]修正網頁標籤包括的內容但不包含網頁標籤本身[/size][/font][/color][/font][/p][/td][/tr]
[/table]


假設有一段網頁文件內容如下:[code]<P>歡迎光臨<B>麻辣</B>學園</P>[/code]則上列四種屬性的值將會如下表:
[table]
[tr][td=1,1,88][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]屬性[/size][/font][/font][/p][/td][td=1,1,428][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]值[/size][/font][/font][/p][/td][/tr]
[tr][td=1,1,88][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]innerHTML[/size][/font][/color][/font][/p][/td][td=1,1,428][p=30, 2, left][font=Courier New][size=2][font=全真中細圓體][size=14pt][color=#000000]歡迎光臨[/color][color=fuchsia]<B>[/color][color=#000000]麻辣[/color][color=fuchsia]</B>[/color][color=#000000]學園[/color][/size][/font][font=全真中細圓體][/font][/size][/font][/p][/td][/tr]
[tr][td=1,1,88][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]innerText[/size][/font][/color][/font][/p][/td][td=1,1,428][p=30, 2, left][color=#000000][font=Courier New][size=2][font=全真中細圓體][size=14pt]歡迎光臨麻辣學園[/size][/font][font=全真中細圓體][/font][/size][/font][/color][/p][/td][/tr]
[tr][td=1,1,88][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]outerHTML[/size][/font][/color][/font][/p][/td][td=1,1,428][p=30, 2, left][font=Courier New][size=2][font=全真中細圓體][size=14pt]<P>[/size][/font][font=全真中細圓體][size=14pt][color=#000000]歡迎光臨[/color][color=fuchsia]<B>[/color][color=#000000]麻辣[/color][color=fuchsia]</B>[/color][color=#000000]學園[/color][color=blue]</P>[/color][/size][/font][font=全真中細圓體][/font][/size][/font][/p][/td][/tr]
[tr][td=1,1,88][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]outerText[/size][/font][/color][/font][/p][/td][td=1,1,428][p=30, 2, left][font=全真中細圓體][size=14pt][font=Courier New][size=2][color=#000000]歡迎光臨麻辣學園[/color][/size][/font][/size][/font][font=全真中細圓體][/font][/p][/td][/tr]
[/table]

小誌 發表於 2010-5-20 15:38

當我們指定新的資料值給innerHTML、outerHTML屬性時,我們所指定的新資料值將會取代原先的資料值;當我們指定新的資料值給outerText屬性時,我們所指定的新資料值將會取代原先的資料值;當我們指定新的資料值給innerText屬性時,innerText屬性內的資料值則只有外層標籤所包括的資料被取代,例如我們指定「我最喜歡爪哇」給innerText、outerText屬性則結果如下:
[table]
[tr][td=1,1,88][font=全真中細圓體][color=#000000][font=Courier New][size=2]innerText[/size][/font][/color][/font][/td][td=1,1,428][font=Courier New][size=2][font=全真中細圓體][size=14pt]<P>[/size][/font][font=全真中細圓體][size=14pt][color=#000000]我最喜歡爪哇[/color][color=blue]</P>[/color][/size][/font][font=全真中細圓體][/font][/size][/font][/td][/tr]
[tr][td=1,1,88][font=全真中細圓體][color=#000000][font=Courier New][size=2]outerText[/size][/font][/color][/font][/td][td=1,1,428][font=全真中細圓體][size=14pt][color=#000000][font=Courier New][size=2]我最喜歡爪哇[/size][/font][/color][/size][/font][/td][/tr]
[/table]


現在我利用outerText與outerHTML屬性舉一個圖片換文字的例子:

使用outerText屬性[code]<html>
<HEAD>
<title>圖片換文字</title>
</HEAD>
<BODY>
<img src="test.gif" onClick="this.outerText='<B>圖片換文字</B>'">
</BODY>
</html>[/code][attach]780[/attach]

使用outerHTML屬性[code]<html>
<HEAD>
<title>圖片換文字</title>
</HEAD>
<BODY>
<img src="test.gif" onClick="this.outerHTML='<B>圖片換文字</B>'">
</BODY>
</html>[/code][attach]781[/attach]

頁: [1]

麻辣家族討論版版為 麻辣學園 網站成員  由 昱得資訊工作室 © Since 1993 所提供