dom.style.width/height：只能取出內聯樣式的寬度和高度
dom.currentStyle.width/height：獲取即時的計算的樣式，但是只有IE支持
window.getComputedStyle(dom).width：獲取即時計算的樣式，支持其他瀏覽器，兼容性更好
dom.getBoundingClientRect( ).width/height：計算盒模型在頁面中的絕對位置，比較少用。
dom.offsetWidth/offectHeight：返回元素實際大小
一、dom.style.width/height
這種方式只能取到dom元素內聯樣式所設置的寬高，也就是說如果該節點的樣式是在style標簽中或是外部的CSS樣式表中的話，通過這種方法是沒辦法獲取dom的寬高的。
實例：
在這個例子中給box1使用<style>設置樣式，給box2使用內聯樣式設置寬高。
所以在使用 console.log(document.getElementById(" ").style.width/height) 只能返回box2的寬度和高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取盒子寬高</title>
<style> #box1{ width:200px;height:200px; background: #ddf;
}
</style>
</head>
<body>
<div id="box1">盒子一</div>
<div id="box2" style="width:300px; height:300px; background:#faa;">盒子二</div>
</body>
</html>
二、dom.currentStyle.width/height
這種方式獲取的是在頁面渲染完成后的結果，意味着無論以哪種方式，內聯也好，style標簽中也好，都可以獲取的到。但是這種方法只能在IE瀏覽器中使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取盒子寬高</title>
<style> #box1{ width:200px;height:200px; background: #ddf;
}
</style>
</head>
<body>
<div id="box1">盒子一</div>
<div id="box2" style="width:300px; height:300px; background:#faa;">盒子二</div>
</body>
</html>
在IE瀏覽器中的效果：
在360瀏覽器中的效果
三、window.getComputedStyle(dom).width/height
這種方式的原理和方式二是一樣的，都可以在任何方式在獲取頁面在完成渲染之后的結果。相比dom.currentStyle.width/height方式而言，這種方式可以兼容更多的瀏覽器，不僅僅是IE瀏覽器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取盒子寬高</title>
<style> #box1{ width:201px;height:200px; background: #ddf; border:5px solid yellow;
}
</style>
</head>
<body>
<div id="box1">盒子一</div>
<div id="box2" style="width:301px; height:300px; background:#faa;border:5px solid #aff;">盒子二</div>
</body>
</html>
在Chrome瀏覽器中的效果
四、dom.getBoundingClientRect( ).width/height
這個方法可以獲得運行后的屬性。一般用於計算一個元素的絕對定位。返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。
- console.log(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離
- console.log(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離
- console.log(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離
- console.log(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離
- console.log(box.getBoundingClientRect().width); //元素本身寬度加上邊框之后的全部寬度
- console.log(box.getBoundingClientRect().height); //元素本身高度加上邊框之后的寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取盒子寬高</title>
<style> #box1{ width:201px;height:200px; background: #ddf; border:5px solid yellow; position: relative; top:20px;left:40px;
}
</style>
</head>
<body>
<div id="box1">盒子一</div>
</body>
<script>
var box=document.getElementById('box1'); // 獲取元素
console.log(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離
console.log(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離
console.log(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離
console.log(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離
console.log(box.getBoundingClientRect().width); //元素本身寬度加上邊框之后的全部寬度
console.log(box.getBoundingClientRect().height); //元素本身高度加上邊框之后的寬度
</script>
</html>
五、dom.offsetWidth/offectHeight
這組方法可以 返回元素實際大小，包含邊框，內邊距和滾動條。返回元素大小，默認單位是px。如果沒有設置任何CSS寬度和高度，也會在計算后得到寬度和高度。理解offsetWidth和offsetHeight設置的元素實際大小：
- 設置邊框，輸出值等於原本大小+邊框大小；
- 設置內邊距，輸出值等於原本大小+內邊距大小；
- 設置外邊距 / 滾動條，輸出值無變化等於原本大小；
對於元素大小的獲取，一般是塊級(block)元素並且以設置了CSS大小的元素較為方便。如果是內聯元素(inline)或者沒有設置大小的元素就尤為麻煩，所以，建議使用的時候注意。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取盒子寬高</title>
<style> #box1{ width:201px;height:200px; background: #ddf; border:5px solid yellow;margin:40px;
}
</style>
</head>
<body>
<div id="box1">盒子一</div>
</body>
<script>
var box=document.getElementById('box1');//獲取元素；
console.log(box.offsetWidth); console.log(box.offsetHeight); </script>
</html>
因為元素原本寬度和高度分別為201px和200px，所以加上兩邊邊框的大小 10px，offsetWidth和offsetHeight輸出值分別為 211 和 210。雖然設置了margin值，但是並不會對最后輸出結果產生影響。
