DOM——元素大小 DOM——元素大小 DOM中沒有規定如何確定頁面中與元素的大小，IE率先映入了一些屬性來確定頁面中元素的大小，以便開發人員使用，目前，所有主要的瀏覽器都已經支持這些屬性了。 1.偏移量（單位為像素） 首先介紹的屬性涉及偏移量，包括元素在屏幕上占用的所有可見的空間。元素的可見大小由 ...
DOM——元素大小 DOM中沒有規定如何確定頁面中與元素的大小，IE率先映入了一些屬性來確定頁面中元素的大小，以便開發人員使用，目前，所有主要的瀏覽器都已經支持這些屬性了。 1.偏移量（單位為像素） 首先介紹的屬性涉及偏移量，包括元素在屏幕上占用的所有可見的空間。元素的可見大小由其高度、寬度決定，包括所有內邊距、滾動條和邊框大小（註意，不包括外邊距）。通過以下4個屬性可以取得元素的偏移量。 offsetParent：獲取元素的最近的具有定位屬性（absolute或者relative）的父級元素。如果都沒有則返回body offsetHeight：元素在垂直方向上占用的空間大小。包括元素的高度、（可見的）水平滾動條的高度、上邊框高度和下邊框高度。 offsetWidth：元素在水平方向上占用的空間大小。包括元素的寬度、（可見的）垂直滾動條的寬度、左邊框寬度號右邊框寬度。 offsetLeft：元素的左外邊框至父元素的左內邊框之間的像素距離。 offsetTop：元素的上外邊框至父元素的上內邊框之間的像素距離。
<style type="text/css">
*{margin:0;padding:0;}
#fu{width:100px;height:100px;background:red;margin:100px;padding:20px;}
#fu .zi{width:20px;height:20px;background:black;}
</style>
<div id="fu">
<div class="zi"></div>
</div>
<script type="text/javascript">
var oZi = document.querySelector(".zi");
function getElementLeft(element){
var elementLeft = element.offsetLeft;
var fu = element.offsetParent;
while(fu != null){
elementLeft += fu.offsetLeft;
fu = fu.offsetParent;
}
return elementLeft;
}
console.log("offsetLeft值為：" + getElementLeft(oZi) + "px");
</script>
【註】所有偏移量屬性都是只讀的，而且每次訪問它們都需要重新計算。因此，應該儘量避免重覆訪問這些屬性；如果需要重覆使用某些屬性的值，可以將它們保存在局部變數中，以提高性能。
2.客戶區大小（單位為像素）
元素的客戶區大小，指的是元素內容及其內邊距所占據的空間大小。有關客戶區大小的屬性有兩個：clientWidth和clientHeight。
clientWidth：元素內容區寬度加上左右內邊距寬度
clientHeight：元素內容區高度加上上下內邊距高度
var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight); var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);通過scrollLeft和scrollTop屬性既可以確定元素當前滾動狀態，也可以設置元素的滾動位置。在元素尚未滾動時，這兩個屬性的值都等於0. 總覽圖：
