無DTD文檔格式時,各瀏覽器對document.body各屬性的解釋多種多樣,在最大化和非最大化情況下解釋又會有些出入,而
在加上DTD文檔格式后,IE7,FF,OPERA這三個瀏覽器表現出了驚人的一致性,只有IE6在頁面內容超出窗口大
小時出現了大變化(具體請看IE6部分),也就是說在正常的窗口最大化情況下,四個瀏覽器對這些屬性的解釋都是一樣的,既:
scrollHeight=
內容實際高度;
scrollWidth=可視區域寬度;
clientWidth=可視區域寬度;
clientHeight=內容
實際高度;
offsetWidth=可視區域寬度;
offsetHeight=內容實際高度;
IE6在頁面內容超出窗口
大小時將寬度屬性scrollWidth、clientWidth、offsetWidth都解釋為內容實際寬度。
只有兩種解釋:所有的寬度屬性(?Width)被解釋為可視區域寬度,高度屬性(?Height)被解釋為內容實際的
高度。很吃驚,但經過我多次測試(我還用高度1400、寬度為1600的內容測試過),得出的結論和上面的一致,不管是多高多寬,
在申明了文檔類型DTD之后,這些屬性的解釋就和滾動條、邊框沒有關系了。這個結果和網上流傳的大不相同啊,哈哈!但我想我是對的!希望能傳播給大家正確
的知識!
建議:
1.在使用這些屬性時,一定要申明文檔類型!
2.IE6瀏覽器下要做相應的修正!
3.
盡量不要用到這些屬性,因為會讓你很暈=.=!
在限定了文檔類型的情況下,多數瀏覽器對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類型之后就再也不能取到“可見區域高度”和“內容實際寬度”等等屬性了嗎?
其實,我們可以用document.documentElement代替document.body來獲取我們想要的結果
將代碼中的document.body替換為document.documentElement,再來看看各瀏覽器下的實際結果:
IE6:
IE7:
FF3:

部分內容取自:http://blog.silentash.com/2008/06/document-body-attributes/
posted on 2010-06-01 08:55
紫蝶∏飛揚↗ 閱讀(1055)
評論(0) 編輯 收藏