一、直接获取元素样式属性值
运用之前在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
当然，如果无需兼容IE8及以下浏览器的话，也可以直接通过这个矩形对象获取其宽高。
console.log(box.getBoundingClientRect().width); // 130
console.log(box.getBoundingClientRect().height); // 130
可以看出，此时该大小值与通过offsetWidth属性获取的值是一样的。然而，并不是在所有情况下这两种方式获取的值都是相同的值，比如通过CSS3中的transform变换后，两种方式获取的值将不一样！
比如，我们给box元素加上transform: scale(2)的样式后，其offsetWidth和offsetHeight均保持不变，而box.getBoundingClientRect().width和box.getBoundingClientRect().height则均变为原来的两倍。
console.log(box.offsetWidth); // 130
console.log(box.offsetHeight); // 130
console.log(box.getBoundingClientRect().width); // 260
console.log(box.getBoundingClientRect().height); // 260
结束语：本文所讲内容都是非常实用的，可能经常都会用到，另外注意其中除了style、scrollLeft和scrollTop是可读可写之外，其他均是只读的。
