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