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. C语言 · 阶乘计算 · 基础练习

    问题描述 输入一个正整数n,输出n!的值. 其中n!=1*2*3*-*n. 算法描述 n!可能很大,而计算机能表示的整数范围有限,需要使用高精度计算的方法.使用一个数组A来表示一个大整数a,A[0]表 ...

  2. 6. ModelDriven拦截器、Preparable 拦截器

    1. 问题 Struts2 的 Action 我们将它定义为一个控制器,但是由于在 Action 中也可以来编写一些业务逻辑,也有人会在 Action 输入业务逻辑层. 但是在企业开发中,我们一般会将 ...

  3. SDWebImage源码解读之SDWebImageCache(下)

    第六篇 前言 我们在SDWebImageCache(上)中了解了这个缓存类大概的功能是什么?那么接下来就要看看这些功能是如何实现的? 再次强调,不管是图片的缓存还是其他各种不同形式的缓存,在原理上都极 ...

  4. css样式之border-radius

    border-radius 属性设置边框的园角 可能的值:像素,百分比 扩展延伸 html代码 <div></div> css代码 div { height: 200px; w ...

  5. IOS之Objective-C学习 ARC下的单例模式

    单例模式是我常用的一种设计模式,最常见的用途就是用来保存数据并且传递数据.这都归功于单例模式的特性,首先就让我为大家简单介绍一下单例模式的特性. 单例模式的三大特性: 1.某个类只能有一个实例: 2. ...

  6. vim环境变量配置、背景色配置

    我们使用vi或者vim的时候,如果想要显示行号,可能会这样做:切换到命令模式,然后输入set nu,再按回车键就显示了:还有就是咱们在编写程序的时候,有的时候会希望按下回车键后,光标不是每次都在行首, ...

  7. php利用root权限执行shell脚本

    vi /etc/sudoers , 为apache用户赋予root权限,并且不需要密码,还有一步重要的修改(我被困扰的就是这个地方) root  ALL=(ALL)  ALL apache  ALL= ...

  8. Linux监控工具介绍系列——vmstat

      说来惭愧,玩Linux这么久了,居然没有玩转vmstat这个命令,对很多指标的具体意义都有点模糊不清,花了点时间好好学习.整理一下这个命令的相关资料.因为这个命令确实比较重要,而且频繁用到. 命令 ...

  9. Linux.NET实战手记—自己动手改泥鳅（上）

    各位读者大家好,不知各位读者有否阅读在下的前一个系列<Linux.NET 学习手记>,在前一个系列中,我们从Linux中Mono的编译安装开始,到Jexus服务器的介绍,以及如何在Linu ...

  10. “前.NET Core时代”如何实现跨平台代码重用 ——源文件重用

    微软在2002年推出了第一个版本的 .NET Framework,这是一个主要面向Windows 桌面(Windows Forms)和服务器(ASP.NET Web Forms)的基础框架.在此之后, ...