javascript 常用擷取頁面寬高資訊 API

標籤：沒有   螢幕   可見   包括   使用   rip   set   構建   eth   

在頁面的構建中 常常會需要擷取頁面的一些寬高資訊，例如實現 惰性載入圖片 需要擷取頁面的可見地區高度 和 已捲動區域的高度，以判斷圖片所在位置是否可見來決定載入圖片的時間，

花點時間整理了一下，擷取頁面寬高資訊的API

持續整理中...

在IE中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見地區寬度
document.documentElement.clientHeight ==> 可見地區高度

在FireFox中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見地區寬度
document.documentElement.clientHeight ==> 可見地區高度

在Opera中： 
document.body.clientWidth ==> 可見地區寬度
document.body.clientHeight ==> 可見地區高度
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）

而如果沒有定義W3C的標準，則
IE為：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）

Opera為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
真是一件麻煩事情，其實就開發來看，寧可少一些對象和方法，不使用最新的標準要方便許多啊。

 

 

網頁可見地區寬:
document.body.clientWidth

網頁可見地區高:
document.body.clientHeight 

網頁可見地區寬:
document.body.offsetWidth(包括邊線的寬) 

網頁可見地區高:
document.body.offsetHeight(包括邊線的寬) 

網頁本文全文寬:
document.body.scrollWidth 

網頁本文全文高:
document.body.scrollHeight 

網頁被捲去的高:
document.body.scrollTop 

window.pageYOffset

網頁被捲去的左:
document.body.scrollLeft 

window.pageXOffset

網頁本文部分上:
window.screenTop 

網頁本文部分左:
window.screenLeft 

螢幕解析度的高:
window.screen.height 

螢幕解析度的寬:
window.screen.width 

螢幕可用工作區高度:
window.screen.availHeight 

螢幕可用工作區寬度:
window.screen.availWidth 

javascript 常用擷取頁面寬高資訊 API