JS獲取元素的大小（高度和寬度）

在 JavaScript 中，使用下面 3 組屬性可以獲取元素的高度和寬度。如表所示。

與元素尺寸相關的屬性

元素尺寸屬性	說明
clientWidth	獲取元素可視部分的寬度，即 CSS 的 width 和 padding 屬性值之和，元素邊框和捲軸不包括在內，也不包含任何可能的捲動區域
clientHeight	獲取元素可視部分的高度，即 CSS 的 height 和 padding 屬性值之和，元素邊框和捲軸不包括在內，也不包含任何可能的捲動區域
offsetWidth	元素在頁面中佔據的寬度總和，包括 width、padding、border 以及捲軸的寬度
offsetHeight	元素在頁面中佔據的高度總和，包括 height、padding、border 以及捲軸的寬度
scrollWidth	當元素設定了 overflow:visible 樣式屬性時，元素的總寬度，也稱捲動寬度。在預設狀態下，如果該屬性值大於 clientWidth 屬性值，則元素會顯示捲軸，以便能夠翻閱被隱藏的區域
scrollHeight	當元素設定了 overflow:visible 樣式屬性時，元素的總高度，也稱捲動高度。在預設狀態下，如果該屬性值大於 clientWidth 屬性值，則元素會顯示捲軸，以便能夠翻閱被隱藏的區域

範例1

使用 offsetWidth 和 offsetHeight 屬性獲取元素的高度和寬度。

<div style="height:200px;width:200px;">
    <div style="height:50%;width:50%;">
        <div style="height:50%;width:50%;">
            <div style="height:50%;width:50%;">
                <div id="div" style="height:50%;width:50%;border-style:solid;"></div>
            </div>
        </div>
    </div>
</div>
<script>
    var div = document.getElementById("div");
    var w = div.offsetWidth;    // 返回元素的總寬度
    var h = div.offsetHeight;    // 返回元素的總高度
    alert("div.offsetWidth =" + w);
    alert("div.offsetHeight =" +w);
</script>

上面範例在怪異模式和標準模式的瀏覽器中解析結果差異很大，其中怪異模式解析返回寬度為 21 畫素，高度為 21 畫素；而在標準模式的瀏覽器中返回高度和寬度都為 19 畫素。

範例2

設計一個簡單的盒子，盒子的 height 值為 200 畫素，width 值為 200 畫素，邊框顯示為 50 畫素，補白區域定義為 50 畫素。內部包含資訊框，其寬度設定為 400 畫素，高度也設定為 400 畫素，即定義盒子的內容區域為（400px，400px）。

<div id="div" style="height:200px;width:200px;border:solid 50pxred;overflow:auto;padding:50px;">
    <div id="info" style="height:400px;width:400px;border:solid 1px blue;"></div>
</div>

演示效果如下：

---