Javascript拖拽&拖放系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性javascript

在阅读本文之前,请先看一看第一篇文章javascript拖拽&拖放系列文章1之offsetparent属性,因为循序渐进是一个很好的习惯,值得提倡。

好了,看看我们今天的内容吧。

首先让我们先看一看element.offsetleft属性。

支持的浏览器:internet explorer 4.0+,mozilla 1.0+,netscape 6.0+,opera 7.0+,safari 1.0+

定义:返回一个像素数值,它表示当前元素的左边缘到它的offsetparent属性返回的对象左边缘的偏移量。

句法:

leftdis = element.offsetleft

offsetleft属性在internet explorer中的实现存在bug,无论当前元素的offsetparent属性取值如何,它总是以body元素为参照物来计算offsetleft。幸运的是,这个bug在intern explorer 8 beta 1中已经修复。仍然需要注意,ie会从body元素的left-border为标准开始计算offsetleft,而其他的浏览器将从left-margin开始计算。

测试代码1:

code

doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">

html>

head>

meta http-equiv="content-type" content="text/html; charset=utf-8" />

title>untitled documenttitle>

style type="text/css">

body{

border:1px solid red;

margin-left:0px;

}

#parent{

position:relative;

left:25px;

top:0px;

border:1px solid black;

}

style>

script type="text/javascript" language="javascript">

function offset_init(){

var pelement = document.getelementbyid("sonobj");

parentobj = pelement.offsetparent;

var ioffsetleft=pelement.offsetleft;

alert(parentobj.tagname);

alert(ioffsetleft);

}

script>

head>

body onload="offset_init()">

div id="parent">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

span id="sonobj">测试offsetparent属性span>

div>

body>

html>

在ie中,运行这段代码后,会依次弹出两个窗口,分别显示“div”、“437”,分别表示offsetparent和offsetleft。在下图中,红色边框代表body元素,黑色边框代表div元素。从而证明即使在ie中,offsetparent不是body元素,offsetleft的计算也以body元素为标准。

图一:在ie7中的结果

在ie 8 beta 1中这bug已经被修复,将分别返回“div”,“411”。已经和其他浏览器一样符合了标准。

图二:在ietester中对ie 8 beta 1的测试结果

注:ietester是一款非常不错的免费网页测试工具,可以代表ie的各个版本来渲染网页。最新版本0.2.3可以在其官方网站http://www.my-debugbar.com/wiki/ietester/homepage 下载。个人认为每一个web开发者都应该拥有一个。

仍然需要注意的是,如果在一个行内标签(作为offsetparent)内嵌入一个标签(作为当前元素),类此如下代码:

code

span id="parent">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

div id="sonobj">测试offsetparent属性div>

span>

将引起混乱,因为各个浏览器的渲染各不相同(webkit内核浏览器将会把offsetparent属性指向body元素,而且ie对offsetleft取值不同),在行内标签内嵌入行内标签这种情况下,问题尤为明显(各个浏览器对offsetleft属性的取值就都有差异了,无理可循)。

好了,offsetleft就讲完了,我们继续看offsettop属性。

支持的浏览器:internet explorer 4.0+,mozilla 1.0+,netscape 6.0+,opera 7.0+,safari 1.0+

定义:

返回一个数值,指明了当前元素的上边缘到其offsettop属性返回的对象的上边缘的距离。

句法:

topdis = element.offsettop

前面对于offsetleft的bug也存在于offsettop属性中,同样,这个bug在ie 8 beta 1中也已经修复。

图三:在ie7及以下版本中,offsetsettop属性的bug。

当然也不要在内联标签内嵌入标签,因为webkit内核浏览器会错误解释offsetparent属性。

offsetwidth属性

支持的浏览器:internet explorer 4.0+,mozilla 1.0+,netscape 6.0+,opera 7.0+,safari 1.0+

定义:

当前元素的宽度。

句法:

elementwidth = element.offsetwidth

需要指出的是,offsetwidth属性所指的宽度是当前元素的width+padding+border+margin的总和。

offsetheight属性

支持的浏览器:internet explorer 4.0+,mozilla 1.0+,netscape 6.0+,opera 7.0+,safari 1.0+

定义:

当前元素的高度。

句法:

elementheight = element.offsetheight

同样,offsetwidth属性所指的高度是当前元素的height+padding+border+margin的总和。

以上所说的四个属性再加上上一篇文章的offsetparent属性其实都不是dom规范的一部分,但是目前的浏览器都实现了它们,这几个属性也是实现javascript拖拽功能的核心元素。因此一定要深入理解它们。

下一篇将讲讲事件对象中的相关属性。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/