最近寫demo時總覺得自己分不清元素的幾種獲取大小的具體包括哪些，在搜索資料時看見這張圖，看著挺雜的，還是自己分分類比較看得清楚。
一、偏移量
offsetHeight 元素在垂直方向上的高度：內(nèi)容、內(nèi)邊距、邊框
offsetWidth 元素在水平方向的寬度：內(nèi)容、內(nèi)邊距、邊框
offsetLeft 元素的左外邊框到包含元素的左內(nèi)邊框
offsetTop 元素的上外邊框到包含元素的上內(nèi)邊框
offsetParent 包含元素
這是定義，但是：
當(dāng)元素包含在div中，類似
<div class="container"> <div class="content"></div> </div>
元素的offsetParent是body元素，對應(yīng)的元素的offsetLeft與offsetTop都是元素距離body的距離。
二、客戶區(qū)大小
clientHeight 元素內(nèi)容高度+上下內(nèi)邊距高度
clientWidth 元素內(nèi)容寬度+左右內(nèi)邊距寬度
常用應(yīng)用之一：確定瀏覽器可視區(qū)域大小
function getViewport(){
if(document.compatMode=="BackCompat"){
return{
width:document.body.clientWidth;
height:document.body.clientHeight;
}
}else{
return{
width:document.documentElement.clientWidth;
height:document.documentElement.clientHeight;
}
}
}
混雜模式下和標(biāo)準(zhǔn)模式下，Chrome、Opera、FireFox大多數(shù)情況下運(yùn)行在標(biāo)準(zhǔn)模式下，因此進(jìn)入else，函數(shù)返回一個對象，包含width好height屬性。因此確定瀏覽器可視區(qū)域大小總是使用：
document.documentElement.clientWidth; document.documentElement.clientHeight;
三、滾動大小
scrollHeight 在沒有滾動條的情況下，元素內(nèi)容的總高度
scrollWidth 在沒有滾動條的情況下，元素內(nèi)容的總寬度
scrollLeft 被隱藏內(nèi)容區(qū)域左側(cè)的像素，通過這個屬性可以改變元素的滾動位置
scrollTop 被隱藏內(nèi)容區(qū)域上方的像素，通過這個屬性可以改變元素的滾動位置
scrollHeight和scrollWidth主要用于確定元素內(nèi)容的實(shí)際大小。通常認(rèn)為<html>是在Web瀏覽器的視口中滾動的元素（IE6之前版本運(yùn)行在混雜模式下時是<body>元素）。因此，帶有垂直滾動條的頁面總高度就是
document.documentElement.scrollHeight
不包含滾動條的頁面中，通過document.documentElement獲取
scrollHeight、scrollWidth與clientHeight、clientWidth
1、FireFox下兩組屬性相等，等于可視區(qū)域?qū)挾扰c高度
2、Chrome中寬度都等于可視區(qū)域?qū)挾?，clientHeight可視區(qū)域高度，scrollHeight文檔內(nèi)容高度
3、IE8以上兩組屬性相等，等于可視區(qū)域?qū)挾扰c高度
