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()：在不同的浏览器上获取的高度的意义会有差异，也就是浏览器不兼容