obj.offsetTop 指 obj 相對於版面或由 offsetParent 屬性指定的父坐標的計算上側位置，整型
obj.offsetLeft 指 obj 相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置，整型
obj.offsetWidth 指 obj 控件自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際占據的寬度，整型
obj.offsetHeight 指 obj 控件自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際占據的高度，整型
event.clientX(Y)分別是鼠標相對於瀏覽器內容窗口左邊和上邊的偏移像素數值
注意：這幾個量返回的都是數值，要是用的話另需要加上單位“px”。
為了更好地理解這幾個屬性的含義，通過一個代碼示例來看一下。
最后的效果如圖，可以利用鍵盤的上下左右控制紅色方塊在大盒子里移動，不出界。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrap{
width: 500px;
height: 500px;
background: #ccc;
margin: 50px auto;
position: relative;
}
#box{width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box"></div>
</div>
</body>
<script>
var timer1=null;
var wrap=document.getElementById('wrap');
var box=document.getElementById('box');
var m=0,n=0;
var a,b,c,d;
timer1=setInterval(function() {
if (a) {
m=box.offsetLeft-10;
if (m<=0) {
m=0;
};
box.style.left=m+'px';
};
if (b) {
n=box.offsetTop-10;
if (n<=0) {
n=0;
};
box.style.top=n+'px';
};
if (c) {
m=box.offsetLeft+10;
if (m>=wrap.offsetWidth-box.offsetWidth) {
m=wrap.offsetWidth-box.offsetWidth;
};
box.style.left=m+'px';
};
if (d) {
n=box.offsetTop+10;
if (n>=wrap.offsetHeight-box.offsetHeight) {
n=wrap.offsetHeight-box.offsetHeight;
};
box.style.top=n+'px';
};
},10)
document.onkeydown=function(e) {
if (e.keyCode==37) {
a=true;
};
if (e.keyCode==38) {
b=true;
};
if (e.keyCode==39) {
c=true;
};
if (e.keyCode==40) {
d=true;
};
};
document.onkeyup=function(e) {
if (e.keyCode==37) {
a=false;
};
if (e.keyCode==38) {
b=false;
};
if (e.keyCode==39) {
c=false;
};
if (e.keyCode==40) {
d=false;
};
};
</script>
</html>
要注意為父級設置position：relative; 否則，box會默認body為父級，不受wrap限制。
box.offsetTop；box.offsetLeft: 指的是box相對於wrap偏移的距離。
box.offsetWidth；box.offsetHeight:指的是box的可視寬度和高度。