你的位置:首页 > Java教程

[Java教程]通过一个实例理解 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的可视宽度和高度。