圖二：在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)前元素），類此如下代碼：

將引起混亂，因?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)屬性。

最新評(píng)論