element.clientWidth //返回元素的可見寬度
element.clientHeight //返回元素的可見高度
element.clientTop
element.clientLeft
Ghrome中：
clientTop = borderTop
clientLeft = borderLeft
clientWidth = width + paddingclientHeight = height + padding
(client和offset與所包含的元素寬高無關）
element.scrollWidth //返回元素的總體寬度
element.scrollHeight //返回元素的總體高度
element.scrollTop //返回元素上邊緣與視圖之間的距離。
element.scrollLeft //返回元素左邊緣與視圖之間的距離
Ghrome中：
scrollWidth = 所包含元素的總寬度 + padding-left
scrollHeight = 所包含元素的總高度 + padding-top
注：所包含元素的總寬度是指：width + padding + border + margin
當元素設置了overflow屬性，滾動元素後：
scrollLeft的最大值爲 = scrollWidth - clientWidth
element.offsetWidth //返回元素的寬度
element.offsetHeight //返回元素的高度
element.offsetTop //返回元素的垂直偏移位置。
element.offsetLeft //返回元素的水平偏移位置。
Ghrome中：
offsetWidth = width + padding + border
offsetHeight = height + padding + border
offsetTop 獲取對象相對於版面或
由 offsetTop 屬性指定的父座標的計算頂端位置
offsetLeft 獲取對象相對於版面或
由 offsetParent 屬性指定的父座標的計算左側位置
style.top:
我們知道 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 則是網頁內容實際高度。
參考：http://blog.csdn.net/xuantian868/article/details/3116442
應用：
製作可以滾動顯示的控件
<html>
<body style="width:500px;margin:0 auto">
<div id="div1" style="white-space:nowrap;width:500px;overflow:hidden">
<img src="1.jpg"/><img src="1.jpg"/>
</div>
</body>
<script type="text/javascript">
function Scroll(){
console.log(div1.scrollLeft)
//如果滾動到末端，從頭開始開始滾動
if(div1.scrollWidth-div1.clientWidth<=div1.scrollLeft){
div1.scrollLeft = 0;
}
else div1.scrollLeft++;
setTimeout(Scroll,15)
}
Scroll();
</script>
</html>