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

將引起混亂，因為各個瀏覽器的渲染各不相同（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)屬性。

最新評論