DOM中獲取寬高、位置總結

原生JS

一、文檔、窗口的寬高和位置

// 獲取屏幕的寬高
window.screen.height  |  window.screen.width
// 屏幕可用工作區寬高
window.screen.availHeight  |  window.screen.availWidth
// 瀏覽器窗口可見區域寬高
window.innerHeight ≈ document.documentElement.clientHeight
window.innerWidth ≈ document.documentElement.clientWidth
// 當前瀏覽位置距文檔頂部的距離
document.body.scrollTop
// 當前瀏覽位置距文檔左端的距離
document.body.scrollLeft
// 網頁的高
document.body.scrollHeight
document.body.offsetHeight
document.body.clientHeight

 // document.body.和document.documentElement.在瀏覽器下的表現方式不盡相同:
Chrome中：body的三個值相同，都是文檔大小，而
    document.documentElement.clientHeight    ->   視口的大小
    document.documentElement.scrollHeight   ->    文檔的大小
    document.documentElement.offsetHeight   ->    文檔的大小
Firefox中：documentElement都是文檔大小，而
    document.body.clientHeight      ->   視口大小
    document.body.offsetHeight      ->   文檔大小（不含padding border）比   scrollHeght略小
    document.body.scrollHeight      ->   文檔大小 和 documentElement 三個取到的值一樣
Edge中：非常混亂，不做介紹
     
不同瀏覽器的兼容問題，用以下兩個函數來解決：

/*視口的大小，使用方法 ： getViewPort().width;*/
function getViewPort () {
    if(document.compatMode == "BackCompat") {   //瀏覽器嗅探，混雜模式
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}
//獲得文檔的大小（區別與視口）,與上面獲取視口大小的方法如出一轍
function getDocumentPort () {
    if(document.compatMode == "BackCompat") {
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        };
    } else {
        return {
            width: Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),
            height: Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
        }
    }
}

二、元素的寬高和位置

// 尺寸：
clientWidth  |  clientHeight     元素的內尺寸（width + padding）如果有滾動條，是可視區域高度
scrollWidth  |  scrollHeight      元素滾動內容的總高度
offsetWidth  |  offsetHeight     元素的外尺寸  (width + padding + border)
// 位置：
offsetLeft  |  offsetTop     元素相對於已定位父元素(offsetParent)的偏移量
offsetParent元素是指元素最近的定位（relative,absolute）父元素,可遞歸上溯，如果沒有，返回body元素

ele.getBoundingClientRect()   返回元素的大小及其相對可視區域的位置
如：ele.getBoundingClientRect().left   從視口左端到元素左端邊框的距離(不包含外邊距)

scrollLeft  |  scrollTop     是指元素滾動條位置，它們是可寫的

jQuery

// 尺寸
$(window).height() | $(window).width() 　           瀏覽器可視窗口的高度             
$(document).height() | $(document).width()　        整個網頁的文檔高度  
$(element).height() | $(element).width()            元素的寬高(僅內容區域)
$(element).innerheight() | $(element).innerwidth()  元素的寬高(內容 + padding)
$(element).outerheight() | $(element).outerwidth()  元素的寬高(內容 + padding + border)
$(element).outerheight(true) | $(element).outerwidth(true)  元素的寬高(內容 + padding + border + margin)
// 位置
$(window).scrollTop() | $(window).scrollLeft()   瀏覽器可視窗口頂端距離網頁頂端的高度（垂直偏移）
$(element).offset()         獲取元素相對文檔的位置  如：$(element).offset().top | $(element).offset().left
$(element).position()       獲取元素相對最近定位父元素的位置  如：$(element).position().top | $(element).position().left

理解：
1.當網頁滾動條拉到最低端時，$(document).height() == $(window).height() + $(window).scrollTop()
2.當網頁高度不足瀏覽器窗口時$(document).height()返回的是$(window).height()。
3.不建議使用$("html").height()、$("body").height()這樣的高度。
原因：
$("body").height()：body可能會有邊框，獲取的高度會比$(document).height()小；
$("html").height()：在不同的瀏覽器上獲取的高度的意義會有差異，也就是瀏覽器不兼容