欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性

 更新時(shí)間:2008年09月22日 15:28:24   作者:  
Javascript拖拽用到的一些關(guān)于位置定位的一些參數(shù)

圖二:在IETester中對(duì)IE 8 Beta 1的測(cè)試結(jié)果

注:IETester是一款非常不錯(cuò)的免費(fèi)網(wǎng)頁測(cè)試工具,可以代表IE的各個(gè)版本來渲染網(wǎng)頁。最新版本0.2.3可以在其官方網(wǎng)站http://www.my-debugbar.com/wiki/IETester/HomePage 下載。個(gè)人認(rèn)為每一個(gè)WEB開發(fā)者都應(yīng)該擁有一個(gè)。
仍然需要注意的是,如果在一個(gè)行內(nèi)標(biāo)簽(作為offsetParent)內(nèi)嵌入一個(gè)標(biāo)簽(作為當(dāng)前元素),類此如下代碼:

復(fù)制代碼 代碼如下:

<span id="parent">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<div id="sonObj">測(cè)試OffsetParent屬性</div></span>

將引起混亂,因?yàn)楦鱾€(gè)瀏覽器的渲染各不相同(WebKit內(nèi)核瀏覽器將會(huì)把OffsetParent屬性指向Body元素,而且IE對(duì)OffsetLeft取值不同),在行內(nèi)標(biāo)簽內(nèi)嵌入行內(nèi)標(biāo)簽這種情況下,問題尤為明顯(各個(gè)瀏覽器對(duì)OffsetLeft屬性的取值就都有差異了,無理可循)。
好了,offsetLeft就講完了,我們繼續(xù)看offsetTop屬性。
支持的瀏覽器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+
定義:
返回一個(gè)數(shù)值,指明了當(dāng)前元素的上邊緣到其offsetTop屬性返回的對(duì)象的上邊緣的距離。
句法:
topDis = element.offsetTop
前面對(duì)于offsetLeft的Bug也存在于offsetTop屬性中,同樣,這個(gè)Bug在IE 8 Beta 1中也已經(jīng)修復(fù)。

圖三:在IE7及以下版本中,offsetsetTop屬性的Bug。
當(dāng)然也不要在內(nèi)聯(lián)標(biāo)簽內(nèi)嵌入標(biāo)簽,因?yàn)閃ebKit內(nèi)核瀏覽器會(huì)錯(cuò)誤解釋offsetParent屬性。
offsetWidth屬性
支持的瀏覽器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+
定義:
當(dāng)前元素的寬度。
句法:
elementWidth = element.offsetWidth
需要指出的是,offsetWidth屬性所指的寬度是當(dāng)前元素的width+padding+border+margin的總和。
offsetHeight屬性
支持的瀏覽器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+
定義:
當(dāng)前元素的高度。
句法:
elementHeight = element.offsetHeight
同樣,offsetWidth屬性所指的高度是當(dāng)前元素的Height+padding+border+margin的總和。
以上所說的四個(gè)屬性再加上上一篇文章的offsetParent屬性其實(shí)都不是Dom規(guī)范的一部分,但是目前的瀏覽器都實(shí)現(xiàn)了它們,這幾個(gè)屬性也是實(shí)現(xiàn)Javascript拖拽功能的核心元素。因此一定要深入理解它們。
下一篇將講講事件中的相關(guān)屬性。

相關(guān)文章

最新評(píng)論