麻辣家族討論版版 - Powered by Discuz! Board

標題: [教學] (教學第36篇) 堆疊中篇 [打印本頁]

作者: 小誌 時間: 2010-5-20 15:36 標題: (教學第36篇) 堆疊中篇

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

如果網頁文件被瀏覽器解析完成後，我們還要修正網頁文件中的內容那怎麼辦？網頁文件的主體元件及其子元件在Dynamic HTML卻有四個屬性可以存取及修正網頁文件版面的能力，這四個屬性分別是：innerHTML、innerText、outerHTML、outerText。

屬性	說明
innerHTML	取得網頁標籤及網頁標籤包括的內容
innerText	取得網頁標籤包括的內容但不包含網頁標籤本身
outerHTML	修正網頁標籤及網頁標籤包括的內容
outerText	修正網頁標籤包括的內容但不包含網頁標籤本身

假設有一段網頁文件內容如下：

歡迎光臨麻辣學園

複製代碼

則上列四種屬性的值將會如下表：

屬性	值
innerHTML	歡迎光臨<B>麻辣</B>學園
innerText	歡迎光臨麻辣學園
outerHTML	<P>歡迎光臨<B>麻辣</B>學園</P>
outerText	歡迎光臨麻辣學園

作者: 小誌 時間: 2010-5-20 15:38

當我們指定新的資料值給innerHTML、outerHTML屬性時，我們所指定的新資料值將會取代原先的資料值；當我們指定新的資料值給outerText屬性時，我們所指定的新資料值將會取代原先的資料值；當我們指定新的資料值給innerText屬性時，innerText屬性內的資料值則只有外層標籤所包括的資料被取代，例如我們指定「我最喜歡爪哇」給innerText、outerText屬性則結果如下：

innerText	<P>我最喜歡爪哇</P>
outerText	我最喜歡爪哇

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

使用outerText屬性

<html>
<HEAD>
<title>圖片換文字</title>
</HEAD>
<BODY>
<img src="test.gif" onClick="this.outerText='圖片換文字'">
</BODY>
</html>

複製代碼

[attach]780[/attach]

使用outerHTML屬性

<html>
<HEAD>
<title>圖片換文字</title>
</HEAD>
<BODY>
<img src="test.gif" onClick="this.outerHTML='圖片換文字'">
</BODY>
</html>

複製代碼

[attach]781[/attach]

歡迎光臨麻辣家族討論版版 (http://forum.twbts.com/)