JavaScript中的一些定位屬性[圖解]

有這張圖就夠了，簡單地說明一下

以Height為例，Width同理：

div.clientHeight：可見視窗除去了margin+border之後的長度。
div.offsetHeight：在div.clientHeight的基礎上加了border和捲軸的長度。
div.scrollHeight：就是元素內容的實際高度。
以Top為例，Left同理：

div.clientTop：margin之後padding之前的長度值。
div.offsetTop：該元素的上border的上邊緣 到 該元素的offsetParent的上border內邊緣的垂直距離。
div.scrollTop：對象的最頂部到對象在當前視窗顯示的範圍內的頂邊的距離，即是在出現了縱向捲軸的情況下，捲軸拉動的距離。
關於offsetParent，不同的瀏覽器有不同的實現演算法，有一種常見布局在各種瀏覽器中 offsetParent 是一樣的，那就是：外層元素 div 的 position 計算值是 relative、absolute 時，內層元素 div 的 offsetParent 總是外層元素 div。