前端页面获取各类页面尺寸及坐标尺寸总结

前端开发过程中,我们时常需要获取页面及视口的相关高度,来实现一些定位、布局和滚动效果，下面总结了一些高度和宽度的获取方式，供大家参考：

1.获取页面滚动条移动的距离

页面的水平滚动距离----> document.body.scrollLeft;
页面的垂直滚动距离----> document.body.scrollTop;

特殊情况:
　　有时候发现document.body.scrollTop一直是0，是页面DTD的问题影响的，页面指定了DTD，即指定了DOCTYPE时（<!DOCTYPE html>），使用document.documentElement。页面没有DTD，即没指定DOCTYPE时，使用document.body。IE和Firefox都是如此。

2.获取页面实际的高度和宽度

页面的高度----> document.documentElement.offsetHeight;
页面的宽度----> document.documentElement.offsetwidth;

3.浏览器渲染视口的高度和宽度
  
视口的高度----> window.innerHeight;
视口的宽度----> window.innerWidth;

4.获取页面元素实际的高度和宽度

元素的高度----> Element.offsetHeight;
元素的宽度----> Element.offsetWidth;

5.获取页面元素相对于视口左上角的坐标值

元素相对于视口左上角的横坐标----> Element.getBoundingClientRect().left;
元素相对于视口左上角的纵坐标----> Element.getBoundingClientRect().top;

6.获取页面元素相对于网页（body）左上角的坐标值

元素相对于网页左上角的横坐标----> Element.getBoundingClientRect().left + document.body.scrollLeft;
元素相对于网页左上角的纵坐标----> Element.getBoundingClientRect().top + document.body.scrollTop;

// 部分jQuery函数
$(window).height() 　//浏览器时下窗口可视区域高度
$(document).height()　　　　//浏览器时下窗口文档的高度
$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度包括border padding margin
$(window).width() 　//浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度包括border padding