以下面的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）的上內(nèi)邊框之間的像素距離。
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 ：被隱藏在內(nèi)容區(qū)域左側(cè)或上方的像素數(shù)
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
