假設obj 為某個HTML 控件
obj.offsetTop 指obj 相對於版面或由offsetParent 屬性指定的父座標的計算上側位置，整型，單位像素。
obj.offsetLeft 指obj 相對於版面或由offsetParent 屬性指定的父座標的計算左側位置，整型，單位像素。
obj.offsetWidth 指obj 控制項本身的絕對寬度，不包括因overflow 而未顯示的部分，也就是其實際佔據的寬度，整型，單位像素。
obj.offsetHeight 指obj 控制項本身的絕對高度，不包括因overflow 而未顯示的部分，也就是其實際佔據的高度，整型，單位像素。
我們對前面提到的offsetParent 作個說明。
offsetParent 取得定義物件offsetTop 和offsetLeft 屬性的容器物件的參考。 offsetTop 與offsetParent 很複雜，不同瀏覽器有不同解釋，浮動一下解釋又不同了，所以我們一般只要理解透過二者可以獲得控制在瀏覽器中的絕對位置即可。
以上屬性在FireFox 中也有效。
另外：我們這裡所說的是指HTML 控制項的屬性值，並不是document.body，document.body 的值在不同瀏覽器中都有不同解釋（實際上大多數環境是因為對document.body 解釋不同造成的，並不是由於對offset 解釋不同造成的）
我們知道offsetTop 可以得到HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的差別是：
一、offsetTop 回傳的是數字，而style.top 回傳的是字串，除了數字外還帶有單位：px。
二、offsetTop 只讀，而style.top 可讀寫。
三、如果沒有給HTML 元素指定過top 樣式，則style.top 傳回的是空字串。
offsetLeft 與style.left、offsetWidth 與style.width、offsetHeight 與style.height 也是同樣道理。
clientHeight
大家對clientHeight 都沒有什麼異議，都認為是內容視覺區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最後一個工具條以下到狀態列以上的這個區域，與頁面內容無關。
offsetHeight
IE、Opera 認為offsetHeight = clientHeight + 捲軸+ 邊框。
NS、FF 認為offsetHeight 是網頁內容實際高度，可以小於clientHeight。
scrollHeight
IE、Opera 認為scrollHeight 是網頁內容實際高度，可以小於clientHeight。
NS、FF 認為scrollHeight 是網頁內容高度，不過最小值是clientHeight。
簡單地說
clientHeight 就是透過瀏覽器看內容的這個區域高度。
NS、FF 認為offsetHeight 和scrollHeight 都是網頁內容高度，只不過當網頁內容高度小於等於clientHeight 時，scrollHeight 的值是clientHeight，而offsetHeight 可以小於clientHeight。
IE、Opera 認為offsetHeight 是視覺區域clientHeight 捲軸加邊框。 scrollHeight 是網頁內容實際高度。
同理
clientWidth、offsetWidth 和scrollWidth 的解釋與上方相同，只是把高度換成寬度即可。
說明
以上基於DTD HTML 4.01 Transitional，如果是DTD XHTML 1.0 Transitional 則意義又會不同，在XHTML 中這三個值都是同一個值，都表示內容的實際高度。新版本的瀏覽器大多支援根據頁面指定的DOCTYPE 來啟用不同的解譯器
scrollTop 是「捲」起來的高度值，範例：
複製代碼代碼如下:
<div id="p">
<div id="t">如果為p 設定了scrollTop，這些內容可能不會完全顯示。 </div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
由於為外層元素p 設定了scrollTop，所以內層元素會向上捲，這捲起來的部分就是scrollTop。
scrollLeft 也是類似道理。
我們已經知道offsetHeight 是自身元素的寬度，而scrollHeight 是內部元素的絕對寬度，包含內部元素的隱藏的部分。上述中p 的scrollHeight 為300，而p 的offsetHeight 為100。
scrollWidth 也是類似道理。
IE 和FireFox 全面支持，而Netscape 8 和Opera 7.6 不支援scrollTop、scrollLeft（document.body.scrollTop、document.body.scrollLeft 除外）。
1.clientHeight, clientWidth:
這兩個屬性大體上顯示了元素內容的像素高度和寬度.理論上說這些測量不考慮任何透過樣式表加入
元素中的頁邊距,邊框等.
2.clientLeft,clientTop:
這兩個回傳的是元素周圍邊框的厚度,如果不指定一個邊框或不定位改元素,他的值就是0.
3.scrollLeft,scrollTop:
如果元素是可以滾動的,可以透過這兩個屬性得到元素在水平和垂直方向上滾動了多遠,單位是像素.
對於不可以滾動的元素,這些值總是0.
4. scrollHeight,scrollWidth:
不管有多少物件在頁面上可見,他們得到的是整體.
5.style.left:
定位元素與包含它的矩形左邊界的偏移量
6.style.pixelLeft:
傳回定位元素左邊界偏移量的整數像素值.因為屬性的非像素值傳回的是包含單位的字串,例如,30px. 利用這個屬性可以單獨處理以像素為單位的數值.
7.style:posLetf:
傳回定位元素左邊界偏移的數量值,不管對應的樣式表元素指定什麼單位.因為屬性的非位置值傳回的是包含單位的字串,例如,1.2em
top,pixelTop,posTOp這幾個類比就行了.
LEFT: 為從左向右移的位置,即掛件距離螢幕左邊緣的距離;
clientLeft 傳回物件的offsetLeft屬性值和到目前視窗左邊的真實值之間的距離
offsetLeft 傳回物件相對於父級物件的佈局或座標的left值，就是以父級物件左上角為座標原點，向右和向下為X、Y軸正方向的x座標
pixelLeft 設定或傳回物件相對於視窗左邊的位置
scrollWidth 是物件的實際內容的寬，不包邊線寬度，會隨物件中內容的多寡改變（內容多了可能會改變物件的實際寬度）。
clientWidth 是物件可見的寬度，不包捲軸等邊線，會隨視窗的顯示大小改變。
offsetWidth 是物件的可見寬度，包滾動條等邊線，會隨視窗的顯示大小改變。
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight皆無關)
offsetwidth:是元素相對父元素的偏移寬度。等於border+padding+width
clientwidth：是元素的可見寬度。等於padding+width
scrollwidth:是元素的寬度且包括滾動部分。
offsetLeft:Html元素相對於自己的offsetParent元素的位置
scrollLeft:傳回並設定目前橫向滾動務的座標值
複製代碼代碼如下:
<input type="button" value="點一下" onclick="move()">
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<script language="javascript">
function move()
{
var d=document.getElementById("d")
a=eval(20)
d.scrollLeft+=a
}
</script>
儲存為網頁，運行一下，點擊按鈕，滾動條移動
點選div，先彈出b相對於a的位置，再彈出a相對於視窗的位置