js获取元素宽高

以下面的demo为例，来展示js是如何获取一个元素的宽高的：

<style>
  div {
    width: 100px;
    height: 100px;
    padding: 50px;
    margin: 50px;
    border:50px solid;
  }
</style>
<div id="div"></div>
<script>
    var d = document.querySelector('#div');
</script>

1. window.getComputedStyle()、element.currentStyle

var ds = getComputedStyle(d);
ds.width;     //100px;
d.currentStyle.width;  //100px， 

• IE不支持window.getComputedStyle()，支持element.currentStyle;
• 获得计算后元素的宽高，会受到box-sizing属性的影响，默认为content-box的宽度

2. offsetHeight、offsetWidth、offsetTop、offsetLeft、officeParent

d.offsetWidth;  // 300 (number)

• offsetHeight、offsetWidth：是border-box的宽高
• offsetTop、offsetLeft：元素上、左外边框到包含元素（officeParent）的上内边框之间的像素距离。

3. clientWidth、clientHeight

d.clientWidth; //      200 为padding-box的宽高
document.documentElement.clientHeight; // 为视口的高度
document.body.clientHeight;   //  300 为body的高度
document.documentElement.offsetHeight  //400 为html的高度

4. scrollHeight、 scrollWidth、 scrollTop、 scrollLeft

• scrollHeight、scrollWidth：用来获取滚动元素的宽高
• scrollTop、 scrollLeft ：被隐藏在内容区域左侧或上方的像素数

5. getBoundingClientRect()

这个方法返回一个矩形对象，包含6个属性：left、right、top、bottom、width、height。这些属性给出了元素在页面中相对于视口的位置。

var rect = d.getBoundingClientRect();
rect.left;    //50
rect.right;    //350
rect.width;    //300
rect.top;    //50
rect.bottom;    //350
rect.height;    //300