obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型obj.offsetWidth 指 obj ...
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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
