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的可视宽度和高度。

通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight的更多相关文章

  1. JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

    /*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...

  2. 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）

    偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...

  3. [学习笔记]一个实例理解Lingo的灵敏性分析

    一个实例理解Lingo的灵敏性分析     线性规划问题的三个重要概念:    最优解就是反应取得最优值的决策变量所对应的向量.    最优基就是最优单纯形表的基本变量所对应的系数矩阵如果其行列式是非 ...

  4. 透过一个实例理解C++语言的explicit关键字

    我们先看一段代码:    建立people.cpp 文件,然后输入下列内容:class People{    public:      int age;     explicit People (in ...

  5. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  6. JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

    这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...

  7. 关于offsetWidth,offsetHeight,offsetTop,offsetLeft和二维数组的声明

    offsetWidth,offsetHeight,offsetTop,offsetLeft 为只读状态,返回的值是int形式 只读形式即不能通过修改其值的大小. 想要修改某元素的这些值的大小(widt ...

  8. js的offsetWidth,offsetHeight,offsetLeft,offsetTop

    js的offsetWidth,offsetHeight,offsetLeft,offsetTop

  9. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

随机推荐

  1. HttpClient的替代者 - RestTemplate

    需要的包 ,除了Spring的基础包外还用到json的包,这里的数据传输使用json格式 客户端和服务端都用到一下的包 <!-- Spring --> <dependency> ...

  2. CRL快速开发框架系列教程十(导出对象结构)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  3. MVC通过路由实现URL重写

    public static class WebApiConfig { public static void Register(HttpConfiguration config) { config.Ro ...

  4. Javascript实现HashTable类

    散列算法可以尽快在数据结构中找出指定的一个值,因为可以通过Hash算法求出值的所在位置,存储和插入的时候都按照Hash算法放到指定位置. <script> function HashTab ...

  5. python 数据类型 ---文件一

    1.文件的操作流程: 打开(open), 操作(read,write), 关闭(close) 下面分别用三种方式打开文件,r,w,a 模式 . "a"模式将不会覆盖原来的文件内容, ...

  6. 网站里加入QQ在线客服

    1.开启"QQ在线状态"服务  http://jingyan.baidu.com/article/b24f6c823425a586bfe5da1f.html http://www. ...

  7. 项目持续集成环境（jenkins + SVN + maven + tomcat）

    整体流程 每次SVN上代码有变动,触发自动构建动作,并部署到服务器的tomcat上,具体流程: 1.SVN上提交代码修改 2.maven执行Goals 3.将web工程打成war包 4.关闭服务器的t ...

  8. Spring MVC重定向和转发以及异常处理

    SpringMVC核心技术---转发和重定向 当处理器对请求处理完毕后,向其他资源进行跳转时,有两种跳转方式:请求转发与重定向.而根据要跳转的资源类型,又可分为两类:跳转到页面与跳转到其他处理器.对于 ...

  9. Photoshop、Illustrator思维导图笔记

    半年前学习Photoshop时记得的思维导图笔记,可能不是很全,常用的基本都记下了.

  10. python 常用第三方模块

    除了内建的模块外,Python还有大量的第三方模块. 基本上,所有的第三方模块都会在https://pypi.python.org/pypi上注册,只要找到对应的模块名字,即可用pip安装. 本章介绍 ...