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. 简单粗暴地理解js原型链--js面向对象编程

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

  2. hibernate多对一双向关联

    关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...

  3. javaScript的原型继承与多态性

    1.prototype 我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉 ...

  4. 微软Azure 经典模式下创建内部负载均衡（ILB）

    微软Azure 经典模式下创建内部负载均衡(ILB) 使用之前一定要注意自己的Azure的模式,老版的为cloud service模式,新版为ARM模式(资源组模式) 本文适用于cloud servi ...

  5. 开始学nodejs——net模块

    net模块的组成部分 详见 http://nodejs.cn/api/net.html 下面整理出了整个net模块的知识结构,和各个事件.方法.属性的用法 net.Server类 net.Socket ...

  6. if __name__== "__main__" 的意思(作用)python代码复用

    if __name__== "__main__" 的意思(作用)python代码复用 转自:大步's Blog  http://www.dabu.info/if-__-name__ ...

  7. ABP项目中使用Swagger生成动态WebAPI

    本文是根据角落的白板报的<使用ABP实现SwaggerUI,生成动态webapi>一文的学习总结,感谢原文作者角落的白板报. 1 安装Swashbuckle.core 1.1 选择WebA ...

  8. eclipse — 导入android项目后识别成java项目的问题及解决

    最近在eclipse导入android项目的时候遇到了奇葩问题,再此记录 遇到的问题就是:将完好的android项目导入到eclipse的时候,原本这是一个很容易的事情,但是导入成功后发现,,,靠ec ...

  9. Android 指纹认证

    安卓指纹认证使用智能手机触摸传感器对用户进行身份验证.Android Marshmallow(棉花糖)提供了一套API,使用户很容易使用触摸传感器.在Android Marshmallow之前访问触摸 ...

  10. 完美解决CodeSmith无法获取MySQL表及列Description说明注释的方案

    问题描述: CodeSmith是现在比较实用的代码生成器,但是我们发现一个问题: 使用CodeSmith编写MySQL模板的时候,会发现一个问题:MySQL数据表中的列说明获取不到,也就是column ...