javascript中獲取元素尺寸

1. 瀏覽器的各種尺寸

Javascript獲取獲取屏幕、瀏覽器窗口 ，瀏覽器，網頁高度、寬度的大小

屏幕可用工作區寬度：window.screen.availHeight，和瀏覽器無關，屏幕相關
屏幕可用工作區高度：window.screen.availWidth，和瀏覽器無關，屏幕相關

網頁可見區域寬：document.body.clientWidth ，html中body可視區域的寬clientWidth = width+padding，不包括滾動條，縮放后跟著變
網頁可見區域高：document.body.clientHeight ，html中body可視區域的高clientHeight = height+padding，不包括滾動條，縮放的時候跟著變

網頁可見區域寬：document.body.offsetWidth ,html中body的寬(包括邊線的寬offsetWidth = width + border + padding或者offsetWidth=clientWidth+border) 
網頁可見區域高：document.body.offsetHeight ，html中body的高(包括邊線的寬offsetHeight  = width + border + padding或者offsetHeight=clientHeight+border)

網頁正文全文寬：document.body.scrollWidth ，html中body的實際寬度，即對象的寬度加上可滾動寬度
網頁正文全文高：document.body.scrollHeight，html中body的實際高度，即對象的高度加上可滾動高度

網頁被卷去的高：document.body.scrollTop， html中body向下滾動過的距離
網頁被卷去的左：document.body.scrollLeft ，html中body向右滾動過的距離

網頁正文部分上：window.screenTop ，瀏覽器窗口的左上角在屏幕上的x坐標，只讀屬性
網頁正文部分左：window.screenLeft ，瀏覽器窗口的左上角在屏幕上的y坐標，只讀屬性

屏幕分辨率的高：window.screen.height，屏幕的高，瀏覽器無關，屏幕相關
屏幕分辨率的寬：window.screen.width，屏幕的寬，瀏覽器無關，屏幕相關

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight：表示元素的總高度，包括由于溢出而無法展示在網頁的不可見部分
scrollWidth：表示元素的總寬度，包括由于溢出而無法展示在網頁的不可見部分
注：(1).沒有滾動條時，scrollHeight與clientHeight屬性結果相等，scrollWidth與clientWidth屬性結果相等
       (2).存在滾動條時，但元素設置寬高大于等于元素內容寬高時，scroll和client屬性的結果相等
       (3).存在滾動條，但元素設置寬高小于元素內容寬高，即存在內容溢出的情況時，scroll屬性大于client屬性

scrollLeft：表示被隱藏在內容區域左側的像素數。元素未滾動時，scrollLeft的值為0，如果元素被水平滾動了，scrollLeft的值大于0，且表示元素左側不可見內容的像素寬度
scrollTop：表示被隱藏在內容區域上方的像素數。元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大于0，且表示元素上方不可見內容的像素高度

offsetHeight：獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft：獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop：獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置

event.clientX：相對文檔的水平座標
event.clientY：相對文檔的垂直座標
event.offsetX：相對容器的水平坐標
event.offsetY：相對容器的垂直坐標
document.documentElement.scrollTop：垂直方向滾動的值
event.clientX+document.documentElement.scrollTop：相對文檔的水平座標+垂直方向滾動的量

IE，FireFox 差異如下：

IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)

div.style.top：相對于div所在的元件的頂部距離

要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在 IE下需要深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。

Document對象的body屬性對應HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節點。

document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。

瀏覽器大小調整事件
window.onresize = funName;//當瀏覽器大小發生變化時調用funName函數

getBoundingClientRect()這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。
var box=document.getElementById('box'); // 獲取元素
alert(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離
alert(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離
alert(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離
alert(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離

注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默認坐標從(2,2)開始計算，導致最終距離比其他瀏覽器多出兩個像素，我們需要做個兼容。
document.documentElement.clientTop; // 非IE為0，IE為2
document.documentElement.clientLeft; // 非IE為0，IE為2

function GetRect (element) {
　　var rect = element.getBoundingClientRect();
　　var top = document.documentElement.clientTop;
　　var left= document.documentElement.clientLeft;
　　return{
　　　　top : rect.top - top,
　　　　bottom : rect.bottom - top,
　　　　left : rect.left - left,
　　　　right : rect.right - left
　　}
}

分別加上外邊據、內邊距、邊框和滾動條，用于測試所有瀏覽器是否一致。

2. 判斷滾動條滾動到最底部

web開發中常見的場景，判斷頁面是否滾動到最底部，需要用到DOM的三個屬性值，scrollTop，clientHeight，scrollHeight。scrollTop是滾動條在Y軸上滾動的距離，clientHeight是DOM可視區域的高度，scrollHeight是內容可視區域的高度加上溢出（滾動）的距離。只要這三個屬性值滿足scollTop+clientHeight==srollHeight就可以認為已經滾動到底部。代碼如下：

//滾動條在Y軸上的滾動距離 
function getScrollTop(){
　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
　　if(document.body){
　　　　bodyScrollTop = document.body.scrollTop;
　　}
　　if(document.documentElement){
　　　　documentScrollTop = document.documentElement.scrollTop;
　　}
　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
　　return scrollTop;
}
 
//文檔的總高度 
function getScrollHeight(){
　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
　　if(document.body){
　　　　bodyScrollHeight = document.body.scrollHeight;
　　}
　　if(document.documentElement){
　　　　documentScrollHeight = document.documentElement.scrollHeight;
　　}
　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
　　return scrollHeight;
}
 
//瀏覽器視口的高度 
function getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}
 
window.onscroll = function(){
　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
　　　　alert("已經到最底部了！!");
　　}
}; 

如果使用jquery那就更簡單了：

$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollTop + windowHeight == scrollHeight){
　　　　alert("已經到最底部了！");
　　}
}); 

如果判斷一個DOM元素是否滾動到底部，是類似的，將document.body換成特定的元素就可以了，獲取scrollTop和scrollHeight的方式是一樣的，但是獲取可見高度的時候需要用到offSetHeight屬性，修改一下就可以了。代碼如下：

// 滾動條在Y軸上的滾動距離
function getScrollTop(id) {
    let scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
    bodyScrollTop = id ? document.getElementById(id).scrollTop : document.body.scrollTop;
    documentScrollTop = document.documentElement ? document.documentElement.scrollTop : 0;
    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
    return scrollTop;
}

//文檔的總高度
function getScrollHeight(id) {
    let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
    bodyScrollHeight = id ? document.getElementById(id).scrollHeight : document.body.scrollHeight;
    documentScrollHeight = document.documentElement ? document.documentElement.scrollHeight : 0;
    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
    return scrollHeight;
}

//獲取元素視口的高度
function getWindowHeight(id) {
    let windowHeight = 0;
    if(id) {
        windowHeight = document.getElementById(id).offsetHeight;
    } else {
        if (document.compatMode === "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
    }
    return windowHeight;
}

window.document.getElementById("class_goods").onscroll = () => {
    if(getScrollTop("class_goods") + getWindowHeight("class_goods") === getScrollHeight("class_goods")){
        this.page.pageIndex = this.page.pageIndex + 1
        this.getProduct()
    }
}