Board logo

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

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

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

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

屬性

說明

innerHTML

取得網頁標籤及網頁標籤包括的內容

innerText

取得網頁標籤包括的內容但不包含網頁標籤本身

outerHTML

修正網頁標籤及網頁標籤包括的內容

outerText

修正網頁標籤包括的內容但不包含網頁標籤本身




假設有一段網頁文件內容如下:
  1. <P>歡迎光臨<B>麻辣</B>學園</P>
複製代碼
則上列四種屬性的值將會如下表:

屬性

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屬性
  1. <html>
  2. <HEAD>
  3. <title>圖片換文字</title>
  4. </HEAD>
  5. <BODY>
  6. <img src="test.gif" onClick="this.outerText='<B>圖片換文字</B>'">
  7. </BODY>
  8. </html>
複製代碼
[attach]780[/attach]

使用outerHTML屬性
  1. <html>
  2. <HEAD>
  3. <title>圖片換文字</title>
  4. </HEAD>
  5. <BODY>
  6. <img src="test.gif" onClick="this.outerHTML='<B>圖片換文字</B>'">
  7. </BODY>
  8. </html>
複製代碼
[attach]781[/attach]




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