(教學第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] 當我們指定新的資料值給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]