开发中经常使用获取元素的位置和大小。最近在vue2.x上写了一个图片查看组件。具有拖动和定点缩放功能，需要获取视口大小、元素位置和大小。看了阮老师的相关文章，自己实现了这个组件，也是在阮老师这篇文章的基础上整理出来的，以备日后参考。获取视口大小（宽度和高度）任何元素都具有clientHeight和clientWidth属性，也可用于获取视口大小。jsdocument.documentElement.clientHeight;document.documentElement.clientWidth;大多数情况下，document.documentElement.clientWidth可以返回正确的值，但是在IE6的怪癖模式下，document.body.clientWidth返回的是正确的值，所以要做兼容处理。另外，clientWidth和clientHeight是只读属性，不能赋值。//jsfunctiongetViewPortSize(){if(document.compatMode==="BackCompat"){return{height:document.body.clientHeight,width:document.body.clientWidth}}else{return{height:document.documentElement.clientHeight,width:document.documentElement.clientWidth}}}如果x轴和y轴没有滚动条，也可以使用scrollWidth和scrollHeight，分别代表视口的宽高加上滚动区域的大小，所以当没有滚动条时，它表示视口大小。这两个属性与clientHeight和clientWidth一样，所有元素都有，也是只读属性。//jsfunctiongetPageArea(){if(document.compatMode==="BackCompat"){return{height:document.body.scrollHeight,width:document.body.scrollWidth}}else{return{height:document.documentElement.scrollHeight,width:document.documentElement.scrollWidth}}}获取页面大小（宽度和高度）。这里的页面大小是指正文的大小，包括滚动区域。也是通过getPageArea方法获取的，即scrollHeight和scollWidth属性获取元素大小（width和height）因为所有元素都有2个属性获取其宽高（clientWidth，clientHeight，scrollWidth，scrollHeight），但是有是先决条件：赋值元素没有滚动条。如果要获取宽高的元素有滚动条，scrollWidth和scrollHeight返回内部内容的总宽高，而clientWidth和clientHeight总是返回元素的宽高，所以有两种这里的例子，获取元素的宽高有没有滚动条？有滚动条：//jsfunctiongetElSizeByClient(el){return{height:el.clientHeight,width:el.clientWidth}}没有滚动条：//jsfunctiongetElSizeByClient(el){return{height:el.clientHeight,width:el.clientWidth}}或//jsfunctiongetElSizeByScroll(el){return{height:el.scrollHeight,width:el.scrollWidth}}获取元素位置（左上角）因为页面是基于视口的左上角定位的（0,0),所以我们只能得到top和left的值，right和bottom是可以计算的，利用这两个属性得到top和left的值topleft:el.offsetTop;el.offsetLeft;上面的属性返回的距离是父元素的值，如果想得到绝对距离，需要逐层遍历累加该值。函数getElementOffsetLeft（元素）{varactualLeft=element.offsetLeft;varcurrent=element.offsetParent;while(current!==null){actualLeft+=current.offsetLeft;current=current.offsetParent;}returnactualLeft;}functiongetElementOffsetTop(element){varactualTop=element.offsetTop;varcurrent=element.offsetParent;while(current!==null){actualTop+=current.offsetTop,current=current.offsetParent}returnactualTop;}
