获取元素大小和位置的五种方式

一、直接获取元素样式属性值

运用之前在JS如何获取元素样式?这篇文章中提到的三种获取元素样式方法便可获取元素大小和位置，但前提是该元素得事先定义了相应样式。例如：

<div id="container" style="position: relative; margin: 10px; padding: 10px; border: 5px solid #f00;">
  <div id="box" style="width: 100px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #f00;"></div>
</div>

var box = document.getElementById("box");
console.log(box.style.width); //100px

以上是简单地获取了元素的宽度，返回的是一个字符串，若要转化成数字，可使用parseInt()方法。

console.log(parseInt(box.style.width)); //100

二、offsetWidth和offsetHeight、offsetLeft和offsetTop

1. offsetWidth和offsetHeight

用于获取元素在屏幕上占用的所有可见的空间大小，具体包括以下几个方面：

内容区域+内边距+边框

拿offsetWidth举个例子（offsetHeight同理）：

console.log(box.offsetWidth); //130
console.log(typeof box.offsetWidth);  //'number'

示例中具体计算是这样的：

box.offsetWidth = 100（内容区域宽度） + 20（左右内边距） + 10（左右边框） = 130

从示例中也可以看出，使用offsetWidth获取到的元素宽度是一个数字而不是一个带有单位的字符串，这也是与直接获取样式之间存在的重要区别之一。

2. offsetLeft和offsetTop

用于获取元素的外边框至距离最近的已定位祖先元素的内边框之间的距离，例如：

console.log(box.offsetLeft);  // 20

由于box的父级是container，且具有position: relative这样的定位样式，所以这里的offsetLeft具体计算是这样的：

box.offsetLeft = 10（box左外边距） + 10（container左内边距） = 20

三、clientWidth和clientHeight、clientLeft和clientTop

1. clientWidth和clientHeight

用于获取元素内容及其内边距所占据的大小空间，简单来说就是：

内容区域+内边距（注意不包含滚动条，若有则需减去该部分大小）

拿clientWidth举个例子：

console.log(box.clientWidth); //120

这里的计算很简单：

box.clientWidth = 100（内容区域宽度） + 20（左右内边距） = 120

但是如果该元素存在滚动条，那么情况就不一样了，比如给box样式中加上overflow: scroll;之后：

console.log(box.clientWidth); //103

这是因为，PC端浏览器滚动条默认大小为17px，所以这时：

box.clientWidth = 100（内容区域宽度） + 20（左右内边距） - 17（浏览器纵向滚动条宽度） = 103

2. clientLeft和clientTop

这两个属性其实获取的就是元素的边框宽度，比如：

console.log(box.clientLeft); //5

这里获取的就是box左边框的宽度。

四、scrollWidth和scrollHeight、scrollLeft和scrollTop

1. scrollWidth和scrollHeight

用于获取包含滚动内容的元素的大小，事实上通过该属性获取的元素大小值与clientWidth和clientHeight获取的值是一样的。例如：

console.log(box.scrollWidth); //120

加上滚动条之后：

console.log(box.scrollWidth); //103

2. scrollLeft和scrollTop

用于获取元素当前滚动位置，当然也可以设置元素的滚动位置。其中，scrollLeft可获取隐藏在内容区域左侧的像素数，scrollLeft可获取隐藏在内容区域上方的像素数。

五、getBoundingClientRect()

该方法非常方便实用，可直接获取元素与浏览器视口之间的距离。

使用该方法会返回一个矩形对象，包含left、top、right和bottom四个属性，这些属性给出了元素在页面中相对于视口的位置。具体用法很简单，我们来看下面的例子：

console.log(box.getBoundingClientRect().left);   // 与视口左侧的距离
console.log(box.getBoundingClientRect().top);   // 与视口顶部的距离
console.log(box.getBoundingClientRect().right);   // 与视口右侧的距离
console.log(box.getBoundingClientRect().bottom);   // 与视口底部的距离

通过以上获取到的元素方位，我们也可以计算出该元素的大小。

console.log(box.getBoundingClientRect().right - box.getBoundingClientRect().left);  //130

可以看出，该大小值与通过offsetWidth属性获取的值是一样的。

结束语：本文所讲内容都是非常实用的，可能经常都会用到，另外注意其中除了style、scrollLeft和scrollTop是可读可写之外，其他均是只读的。