獲取頁面高寬度
標準模式下(使用*,ie,opera,webkit body預設有margin,8px,ff沒有):
body類似於block,寬度auto,高度auto,自伸縮
貌似ie6,7一直有垂直滾動條(標準模式下是html的,怪異模式下是body的),opera一直有垂直和水平滾動條(是html的),
hidden滾動條的時候還會出現一些現象...(沒有測試)
html為實際視口的高寬:
沒出滾動條的時候:
document.body值基本正常,clientwidth和documentelement相同,height為0
opera10:
document.documentelement.clientwidth,document.documentelement.clientheight,取值正常
document.documentelement.scrollwidth為視口寬度,等於clientwidth
document.documentelement.scrollheight==2, ???
ie6,7:
document.documentelement.clientwidth,document.documentelement.clientheight,取值正常
document.documentelement.scrollwidth==2 ???
document.documentelement.scrollheight==20 ???
webkit(safari4,chrome2):
document.body.scrollheight可以取到高度,等於document.documentelement.clientheight
document.documentelement.scrollheight==0 ???
ff3:
貌似完美
出滾動條的時候(body內放乙個很大的div):
ie6:
document.body.clientwidth,document.body.clientheight,document.body.scrollwidth,document.body.scrollheight
和document.documentelement.scrollwidth document.documentelement.scrollheight值一樣
document.documentelement.clientwidth document.documentelement.clientheight值為視口的寬高
ie7:
和ie6類似,唯一不同之處是document.body.clientwidth為視口寬度
ff3:
document.documentelement.scrollwidth document.documentelement.scrollheight正常
document.documentelement.clientwidth document.documentelement.clientheight正常,值為視口的寬高
document.body.clientwidth為視口寬度,document.body.clientheight為document.documentelement.scrollheight高度
webkit:
和ie7類似
opera:
和ie7類似,不同之處在於document.body.scrollwidth==document.body.clientwidth;
怪異模式下:
沒滾動條的時候:
ie6: document.body.clientwidth差document.documentelement.scrollwidth 20畫素,
document.body.clientheight差document.documentelement.scrollheight 2畫素
document.body.scrollwidth,document.body.scrollheight分別為2和20 ???
document.documentelement.clientwidth document.documentelement.clientheight為0,0
ie7: 類似ie6
ff3: document.body.clientwidth==document.body.scrollwidth
document.body.clientheight==document.body.scrollheight 取值正常
document.documentelement.scrollwidth==document.body.clientwidth
document.documentelement.clientheight==document.documentelement.scrollheight==0
opera10:
類似ff3
webkit:
document.body.clientwidth==document.body.scrollwidth ==document.documentelement.clientwidth==document.documentelement.scrollwidth
document.body.clientheight==document.body.scrollheight==document.documentelement.clientheight==document.documentelement.scrollheight
有滾動條情況下(body內放乙個很大的div):
ie6:
和沒滾動條類似,document.body.scrollwidth,document.body.scrollheight取到帶滾動的高寬
ie7:
和ie6類似
ff3:
document.body值正常
document.documentelement.clientwidth==document.documentelement.scrollwidth==document.body.clientwidth
document.documentelement.clientheight==document.documentelement.scrollheight==document.body.scrollheight
opera10:
類似於ff3
webkit:
document.body值正常
document.documentelement值正常(除過document.documentelement.clientheight==document.documentelement.scrollheight==document.body.scrollheight)
把body或html的滾動條去掉以後還會有很大差別,太煩了就沒測試...
網名: 天堂左我往右
js獲取頁面高度寬度
關於獲取各種瀏覽器可見視窗大小的一點點研究。在我本地測試當中 在ie firefox opera下都可以使用 document.body.clientwidth document.body.clientheight即可獲得，很簡單，很方便。而在公司專案當中 opera仍然使用 document.bo...
獲取頁面的寬高
1 視窗的滾動事件 function scroll 2 封裝獲取頁面可視區的寬高 function client 3 事件物件的相容性寫法 document.onclick function event 4頁面座標進行相容處理 function event 5 頁面三大座標 document.onc...
筆記 jquery 獲取頁面高寬
window height 瀏覽器當前視窗可視區域高度 document height 瀏覽器當前視窗文件的高度 document.body height 瀏覽器當前視窗文件body的高度 document.body outerheight true 瀏覽器當前視窗文件body的總高度 包括bord...