通过一个实例理解 offsetLeft,offsetTop; offsetWidth , offsetHeight
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的可视宽度和高度。