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

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

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

相关阅读:
k8s 部署springcloud
Actuator 端点监控
[转]再识Cortex-M3之堆栈
ARM中R0-R15寄存器的作用
Keil中 Program Size: Code RO-data RW-data ZI-data
【浅说】堆(heap)和栈(stack)区别
I2C的小结
一个判断I2C总线通信异常原因的方法
Linux输入子系统详解
【转】完整精确导入Kernel与Uboot参与编译了的代码到Source Insight,Understand, SlickEdit

原文地址：https://www.cnblogs.com/cassiel/p/7866521.html