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. Oracle分析函数入门

    一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...

  2. Unity3d学习 预设体(prefab)的一些理解

    之前一直在想如果要在Unity3d上创建很多个具有相同结构的对象,是如何做的,后来查了相关资料发现预设体可以解决这个问题! 预设体的概念: 组件的集合体 , 预制物体可以实例化成游戏对象. 创建预设体 ...

  3. Solr_全文检索引擎系统

    Solr介绍: Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务.Solr可以独立运行在Jetty.Tomcat等这些Servlet容器中. Solr ...

  4. 一起学微软Power BI系列-使用技巧(1)连接Oracle与Mysql数据库

    说起Oracle数据库,以前没用过Oracle不知道,但是这1年用Oracle后,发现真的是想狂吐槽,特别是那个.NET驱动和链接字符串,特别奇葩.总归是和其他数据库不一样,标新立异,不知道为何.另外 ...

  5. Python应用03 使用PyQT制作视频播放器

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/ ...

  6. [算法]——快速排序（Quick Sort）

    顾名思义,快速排序(quick sort)速度十分快,时间复杂度为O(nlogn).虽然从此角度讲,也有很多排序算法如归并排序.堆排序甚至希尔排序等,都能达到如此快速,但是快速排序使用更加广泛,以至于 ...

  7. python中IndentationError: expected an indented block错误的解决方法

    IndentationError: expected an indented block 翻译为IndentationError:预期的缩进块 解决方法:有冒号的下一行要缩进,该缩进就缩进

  8. 页面布局class常见命名规范

    头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...

  9. 【干货分享】流程DEMO-付款申请单

    流程名: 付款申请单  业务描述: 包括每月固定开支.固定资产付款.办公用品付款.工资发放.个人所得税缴纳.营业税缴纳.公积金.社保缴纳和已签订合同的按期付款,最后是出纳付款,出纳核对发票. 流程发起 ...

  10. BPM配置故事之案例4-子表

    公司渐渐对采购管理重视起来了,新招聘了采购主管老李,老李对现有的申请表很不满意,要求将申请物资和申请原因改成物资明细表 物资明细表 小明只好继续致电大毛-- 大毛:把申请物资和申请原因删掉,新增一个数 ...