重新总结了一下，把jQuery的内容删了，用的不多，混在一起太乱了（2018-12-06）
总结
- 获取宽度、高度和位置的方法都只对可见元素有效，无法获取
display:none的元素的信息 - 在所有的浏览器中，如果你想获取视窗可见部分的高度，应该使用
clientHeight offsetTop和scrollTop都是相对于offsetParent而言的- 改变
scrollTop可以改变元素的滚动位置 - 如果要获取页面的
scrollTop不能使用document.body.scrollTop，而要使用document.documentElement.scrollTop Element.getBoundingClientRect()用来精确获得页面位置，返回元素的大小和相当于可视区域的位置
元素大小
客户端区域（clientWidth、clientHeight）
clientWidth = width + padding - 滚动条厚度
可视区域（offsetWidth、offsetHeight、offsetTop、offsetLeft）
offsetWidth = clientWidth + border
offsetTop是元素的border外围相对offsetParent的距离，offsetParent返回值是距离当前元素最近的采用定位（position属性值为fixed、relative或者absolute）祖先元素
有滚动条时，也不受影响的
滚动区域（scrollWidth、scrollHeight、scrollTop、scrollLeft）
scrollWidth用来确定元素内容在没有滚动条的情况下的实际大小
scrollTop是滚动条距离起始点的距离（也就是被隐藏在可视区域外的距离），通过改变这个值可以改变元素的滚动位置
带有垂直滚动条的页面高度是document.documentElement.srcollHeight，同样，获取页面的scrollTop要使用document.documentElement.scrollTop（因为页面承载滚动的元素是根元素，也就是<html>
Document.documentElement是一个会返回文档对象（document）的根元素的只读属性（HTML文档的中就是<html>元素）。
屏幕尺寸（window.screen.width、window.screen.availWidth）
window.screen.width是屏幕分辨率高度，是一个物理尺寸，不受屏幕布局、工具栏、任务栏的影响。
window.screen.availWidth是屏幕可用工作区宽，在分辨率的基础上减去任务栏、工作栏的尺寸
精确获取元素在页面位置
如果通过上面的变量获取元素的实际位置，offsetTop是相对于offsetParent而言，计算时有两个限制：
- 父元素必须是定位元素
- 嵌套元素的计算容易出错
实际上，正确的方式是使用Element.getBoundingClientRect()这个API。
它的返回值是与该元素的CSS边框的只读属性的合集：left/top/right/bottom，除了width和height之外，其余属性都是相对于视口的左上角位置而言的，而不是绝对的。并且计算left和top时并不包括border
如果当页面出现滚动条时，需要获得元素相对于整个网页的left和top值时，只要给left和top加上当前的滚动距离即可（window.scrollX和window.srcollY）
考虑夸兼容性，可以使用window.pageXOffset和window.pageYOffset代替window.scrollX和window.scrollY。
jQuery获取距离元素相对于浏览器文档偏移量的
offset()方法就是利用了getBoundingClientRect()方法：
其他
clientX和clientY
相对于浏览器可视区域左上角的点击坐标
以浏览器左上角（可视区）坐标为原点，计算鼠标点击位置距离其左上角的位置
浏览器窗口大小变化或滚动条滚动，都不会影响点击位置的坐标。
pageX和pageY（只读）
相对于页面左上角坐标的坐标，无滚动条时与clientX相等
该属性是事件发生时鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的
当浏览器出现滚动条的时候，pageX通常会大于clientX，因为页面还存在被卷起来的部分的宽度和高度
screenX和screenY
相对于屏幕左上角的点击坐标
事件发生时鼠标相对于屏幕的坐标，以设备屏幕的左上角为原点，事件发生时鼠标点击的地方即为该点的screenX和screenY值
offsetX和offsetY
相对于点击事件源左上角的坐标
这一对属性是指当事件发生时，鼠标点击位置相对于该事件源的位置，即点击该div，以该div左上角为原点来计算鼠标点击位置的坐标
3385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
