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

圖二:在IETester中對IE 8 Beta 1的測試結(jié)果
注:IETester是一款非常不錯的免費網(wǎng)頁測試工具,可以代表IE的各個版本來渲染網(wǎng)頁。最新版本0.2.3可以在其官方網(wǎng)站http://www.my-debugbar.com/wiki/IETester/HomePage 下載。個人認(rèn)為每一個WEB開發(fā)者都應(yīng)該擁有一個。
仍然需要注意的是,如果在一個行內(nèi)標(biāo)簽(作為offsetParent)內(nèi)嵌入一個標(biāo)簽(作為當(dāng)前元素),類此如下代碼:
<span id="parent">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<div id="sonObj">測試OffsetParent屬性</div></span>
將引起混亂,因為各個瀏覽器的渲染各不相同(WebKit內(nèi)核瀏覽器將會把OffsetParent屬性指向Body元素,而且IE對OffsetLeft取值不同),在行內(nèi)標(biāo)簽內(nèi)嵌入行內(nèi)標(biāo)簽這種情況下,問題尤為明顯(各個瀏覽器對OffsetLeft屬性的取值就都有差異了,無理可循)。
好了,offsetLeft就講完了,我們繼續(xù)看offsetTop屬性。
支持的瀏覽器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+
定義:
返回一個數(shù)值,指明了當(dāng)前元素的上邊緣到其offsetTop屬性返回的對象的上邊緣的距離。
句法:
topDis = element.offsetTop
前面對于offsetLeft的Bug也存在于offsetTop屬性中,同樣,這個Bug在IE 8 Beta 1中也已經(jīng)修復(fù)。 
圖三:在IE7及以下版本中,offsetsetTop屬性的Bug。
當(dāng)然也不要在內(nèi)聯(lián)標(biāo)簽內(nèi)嵌入標(biāo)簽,因為WebKit內(nèi)核瀏覽器會錯誤解釋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的總和。
以上所說的四個屬性再加上上一篇文章的offsetParent屬性其實都不是Dom規(guī)范的一部分,但是目前的瀏覽器都實現(xiàn)了它們,這幾個屬性也是實現(xiàn)Javascript拖拽功能的核心元素。因此一定要深入理解它們。
下一篇將講講事件中的相關(guān)屬性。
相關(guān)文章
JavaScript中this的用法及this在不同應(yīng)用場景的作用解析
由于其運行期綁定的特性,JavaScript 中的 this 含義要豐富得多,它可以是全局對象、當(dāng)前對象或者任意對象,這完全取決于函數(shù)的調(diào)用方式,這篇文章主要給大家介紹了JavaScript中this的用法及this在不同應(yīng)用場景的作用解析,一起看看吧2017-04-04
關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實例
這篇文章主要介紹了關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06
javascript語句中的CDATA標(biāo)簽的意義
javascript語句中的CDATA標(biāo)簽的意義...2007-05-05
JavaScript 字符串常用操作小結(jié)(非常實用)
這篇文章主要介紹了JavaScript 字符串常用操作的知識,包括字符串截取,查找類的方法,對js字符串操作相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-11-11

