DOM元素尺寸offsetWidth,scrollWidth,clientWidth等詳解

例子：

<div id="div" style="height: 200px;width: 200px;border:solid 50px red;overflow:auto;padding:50px">
    <div id="info" style="height:400px;width:400px;border:solid 1px blue;"></div>
    <script>
    var div=document.getElementById("div");
    var ho=div.offsetHeight;
    var hc=div.clientHeight;
    console.log(ho,hc);
    </script>
</div>

1.offsetWidth

offsetWidth=border+padding+height;
這裏等於: 50+50+200+50+50=400

注意：offsetWidth不能在display：none的div獲得正確值,可以用jquery的outerWidth()正確獲得

2.clientWidth

clientWidth=padding+height-滾動條
這裏等於：50+200+50-17=283

注意：jquery的innerWidth()可不把滾動條計算進去，可得到結果300

3.scrollWidth

scrollWidth=padding+包含內容的完全高度
這裏等於：50+402+50=502

4.scrollTop

定義：獲取位於元素頂部邊界與元素中當前可見內容的最頂端之間的距離

scrollTop=scrollHeight-clientHeight
=padding+包含內容的完全高度-(padding+height-滾動條)
=包含內容的完全高度-height-滾動條