復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js位子表示</title>
<script type="text/javascript">
function testClick(oDiv){
var oDivId=document.getElementById(oDiv);
alert("offsetHeight:"+oDivId.offsetHeight+"\n offsetWidth:"+oDivId.offsetWidth+"\n offsetLeft:"+oDivId.offsetLeft+"\n offsetRight:"+oDivId.offsetLeft+"\n offsetTop:"+oDivId.offsetTop
+"\n offsetParent:"+oDivId.offsetParent +"\n scrollHeight:"+oDivId.scrollHeight+"\n scrollWidth:"+oDivId.scrollWidth+"\n scrollTop:"+oDivId.scrollTop+"\n scrollLeft:"+oDivId.scrollLeft+"\n " );
}
</script>
</head>
<body style="margin:0; padding:0;">
<div style="width:300px; height:300px; padding:2px; margin:3px;">
<div id="t1" style="margin:1px; padding:4px ; border:3px solid #eeeeee; width:100px; height:200px; overflow:scroll; cursor:pointer;" onclick="testClick('t1')" >
一般的通過mousedown、mousemove、mouseup等打造的拖動，僅僅在普通的鍵盤+鼠標的電腦設備上可以工作。而到了ios設備上（iphone itouch ipad），則不能工作了。最近因為做個東西，需要支持ios設備，所以只好看了下webkit浏覽器的觸摸事件。
其實也很簡單，對應mousedown、mousemove、mouseup的觸摸事件分別是touchstart、touchmove、touchend。為了寫個demo，花了不少的時間，所以為了節省時間，我文章裡就不多說了，僅貼一下相關代碼。
</div>
</div>
</body>
</html>
ie(ie9,chrome,ff基本一致)中：
offsetHeight(返回元素的高度和寬度，以像素為單位,包含內邊距)：
200+4+4+3+3=214（自身200的高度+上下各為4的內邊距+上下的各為3的border，注意不包括外邊距）
offsetWidth(返回元素的高度和寬度，以像素為單位,包含內邊距)：、
100+3+3+4+4=114 同上
offsetLeft（返回當前元素的左邊界到它的包含元素的左邊界的偏移量，以像素為單位）:
2+3+1=6（ie6下為3）（父級div的內左邊距2+父級div外左邊距+3+子div左外邊距+1，注意這裡子div內邊距是不會影響到offsetLeft）
沒有offsetRight的概念。
offsetTop（返回當前元素的上邊界到它的包含元素的上邊界的偏移量，以像素為單位。）
2+3+1=6(ie6下為2)道理和offsetLeft一樣
scrollHeight(返回元素的完整的高度和寬度，以像素為單位。當一個元素擁有滾動條時（比如由於 CSS 的 overflow:scroll 屬性,如果為hidden，得到的只是能顯示文字所能看到的高度)
474（div的實際的高度，由裡面的文字來決定,overflow:scroll ）
如果overflow：hidden，就只有390，其它的被隱藏了
如果去調overflow,就是390，為什麼 overflow:scroll 卻等於474呢？因為還包含了滾動條的高度
scrollWidth：（和scrollheight道理一樣)
overflow:hidden值為108(子div實際的寬度）
overflow:scroll 值為90（這裡為什麼會這樣？難道不包括滾動條的寬度？）
去掉overflow，值為108
scrolltop(返回已經滾動到元素的左邊界或上邊界的像素數。只有在元素有滾動條的時候，例如，元素的 CSS overflow 屬性設置為 auto 的時候，這些像素才有用。這些屬性也只在文檔的 <body> 或 <html> 標記上定義（這和浏覽器有關），並且一起來制定滾動文檔的位置。注意，這些屬性並不會指定一個 <iframe> 標記的滾動量)
如果不拖動滾動條，默認的值為0；
scrollLeft同上