js中的页面上一些尺寸的获取

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

1. 通过获取非行内样式的专属方法：getComputedStyle获取尺寸
getComputedStyle( )有两个参数：
参数1：元素，要获取的样式的那个元素
参数2：布尔值，决定是否获取伪类（伪元素）的样式
返回值：对象，包含了所有css属性的对象
比如获取一个元素oBox的宽度： console.log(getComputedStyle(oBox,false).width) //100px
通过这种方法获取得到的是字符，带有px，是完整的css属性；并且这种方法具有兼容性，不支持IE8以下的浏览器，因为IE8以下的浏览器没有getComputedStyle函数，如果强行使用，则会报错，显示未定义
2. 通过相应的元素属性获取：
clientWidth，clientHeight 表示：视口宽高即元素所占区域的大小：视觉窗口不包括边框，其大小为内容的大小加上padding值
如获取元素oBox的视口的宽高：
console.log(oBox.clientWidth);
console.log(oBox.clientHeight);
offsetWidth，offsetHeight 表示：它可以获取物体宽度和高度的数值；offsetWidth实际获取的是盒模型(width+border + padding)的宽度，offsetHeight实际获取的是盒模型(Height+border + padding)的高度。
如：获取一个元素oBox的视觉宽高：
console.log(oBox.offsetWidth);
console.log(oBox.offsetHeight);
元素坐标获取（针对非static属性的元素）
最好都设置left，top值，如果不设置当前面有其他元素时会影响他的left，top值， 会包含margin值
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetLeft，offsetTop表示：元素相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档
如获取元素oBox的坐标：
console.log(oBox.offsetLeft);
console.log(oBox.offsetTop);
offsetX和offsetY表示（鼠标位置）相对于最近父级元素的坐标（无论父级是否定位）（不管是谁触发）
clientX，clientY 是相对于视口中的位置（都支持）；表示： 事件发生时，鼠标相对于页面可视区域的坐标（在元素滚动时会影响其坐标值）
页面正文的全文总高和总宽，包括滚动的内容；即框的内容大小加上溢出文本的大小再加padding值
scrollHeight，scrollWidth
滚动的距离：即能获取又能设置，但是需要配合事件使用
scrollTop，scrollLeft表示：滚动条距离顶部和左部的距离；即隐藏区域的上半部分和左半部分
比如：

事件发生时，鼠标相对于页面的坐标
pageX = clientX + document.documentElement.scrollLeft;
pageY = clientY + document.documentElement.scrollTop;
注意：offsetX 和 offsetY 具有兼容性：在必要的时候可以由自己计算得到：
(e.pageX - oBox.offsetLeft === e.ofsetX)
事件发生时，鼠标相对于显示器的坐标(浏览器的位置，页面放缩时，值会发生变化)
screenX和screenY
比如：获取事件e相对于显示器的坐标：
console.log（e.screenX，e.screenY）
注意：offsetLeft和offsetWidth、clientWidth都是dom元素上的属性，而offsetX和clientX、pageX、screenX是function上event的属性。