最近寫demo時(shí)總覺得自己分不清元素的幾種獲取大小的具體包括哪些级解，在搜索資料時(shí)看見這張圖次舌，看著挺雜的伊约，還是自己分分類比較看得清楚姚淆。
一、偏移量
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ù)返回一個(gè)對象，包含width好height屬性尊搬。因此確定瀏覽器可視區(qū)域大小總是使用：
document.documentElement.clientWidth; document.documentElement.clientHeight;
三叁鉴、滾動大小
scrollHeight 在沒有滾動條的情況下，元素內(nèi)容的總高度
scrollWidth 在沒有滾動條的情況下佛寿，元素內(nèi)容的總寬度
scrollLeft 被隱藏內(nèi)容區(qū)域左側(cè)的像素幌墓，通過這個(gè)屬性可以改變元素的滾動位置
scrollTop 被隱藏內(nèi)容區(qū)域上方的像素，通過這個(gè)屬性可以改變元素的滾動位置
scrollHeight和scrollWidth主要用于確定元素內(nèi)容的實(shí)際大小冀泻。通常認(rèn)為<html>是在Web瀏覽器的視口中滾動的元素（IE6之前版本運(yùn)行在混雜模式下時(shí)是<body>元素）常侣。因此，帶有垂直滾動條的頁面總高度就是
document.documentElement.scrollHeight
不包含滾動條的頁面中弹渔，通過document.documentElement獲取
scrollHeight胳施、scrollWidth與clientHeight、clientWidth
1肢专、FireFox下兩組屬性相等舞肆，等于可視區(qū)域?qū)挾扰c高度
2、Chrome中寬度都等于可視區(qū)域?qū)挾炔┱龋琧lientHeight可視區(qū)域高度椿胯，scrollHeight文檔內(nèi)容高度
3、IE8以上兩組屬性相等剃根，等于可視區(qū)域?qū)挾扰c高度
