返回列表 上一主題 發帖

[教學] (教學第36篇) 堆疊 中篇

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1195 
主題
395 
精華
113 
積分
1747 
點名
0  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2025-5-11 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
1# 跳轉到 » 倒序看帖
打印
tT
發表於 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

歡迎光臨麻辣學園

收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1195 
主題
395 
精華
113 
積分
1747 
點名
0  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2025-5-11 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
2#
發表於 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>
複製代碼


使用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>
複製代碼
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 一個人的快樂．不是因為他擁有得多，而是因為他計較得少。
返回列表 上一主題