冇內容管理系統分析-用document.documentElement代替document.body（轉）

閱讀: 9 評論: 0 做者: 阿K&LiveCai 發表於 2010-01-02 23:32 原文連接

[建議]用document.documentElement代替document.body（轉）

以前寫過一篇文章對比了不一樣瀏覽器環境對document.body屬性的解釋，地址是： http://www.silentash.com/blog/2008/62.html
回顧一下，在限定了文檔類型的狀況下，多數瀏覽器對document.body屬性的解釋都是相同的：在加上DTD文檔格式後，IE7,FF,OPERA這三個瀏覽器表現出了驚人的一致性，只有IE6在頁面內容超出窗口大小時出現了大變化（具體請看IE6部分），也就是說在正常的窗口最大化狀況下，四個瀏覽器對這些屬性的解釋都是同樣的,既：

• body.scrollHeight=內容實際高度；
• body.scrollWidth=可視區域寬度；
• body.clientHeight=內容實際高度；
• body.clientWidth=可視區域寬度；
• body.offsetHeight=內容實際高度；
• body.offsetWidth=可視區域寬度；

IE6在頁面內容超出窗口大小時將寬度屬性scrollWidth、clientWidth、offsetWidth都解釋爲內容實際寬度。

上次的測試說明了document.body屬性並不會給咱們返回預期的結果，好比咱們用document.body.clientHeight本來想取得「頁面可見區域高度」，可實際上返回的是「頁面實際內容高度」。

那咱們怎麼辦呢？難道加上了文檔DTD類型以後就不再能取到「可見區域高度」和「內容實際寬度」等等屬性了嗎？

Code

 
其實，咱們能夠用document.documentElement代替document.body來獲取咱們想要的結果

將代碼中的document.body替換爲document.documentElement，再來看看各瀏覽器下的實際結果：

IE6:


IE7:


FF3:


opera9:


safari:


netscape9:


測試結果代表，IE系列瀏覽器對document.documentElement屬性的解釋是正確的，其它標準瀏覽器將offsetHeight解釋成了scrollHeight。火狐和netscape更是把這兩個屬性調換了過來。不過總的來講各屬性均可以有個相應的解釋，不會像document.body同樣只有可憐的兩種解釋。

終於能夠放心地使用JS方法獲取各類頁面高寬屬性了吧^_^!

評論: 0　查看評論　發表評論

找優秀程序員，就在博客園

---

最新新聞：
· 原來全是炒做 傳原九城總裁陳曉薇就職火雨CEO(2010-03-30 15:00)
· iPod之父辭任喬布斯顧問 結束9年蘋果生涯(2010-03-30 14:57)
· 柳傳志：「玩了命」也要作好移動互聯網(2010-03-30 14:34)
· 雲計算到底算啥 技術派PK商業派(2010-03-30 14:16)
· 蘋果聯合創始人：iPad很是適合學生和老人(2010-03-30 14:03)

編輯推薦：IE6已被微軟宣判死刑 但誰能爲它送葬?

網站導航：博客園首頁  我的主頁  新聞  閃存  小組  博問  社區  知識庫