圖二：在IETester中對IE 8 Beta 1的測試結果

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

將引起混亂，因為各個瀏覽器的渲染各不相同（WebKit內核瀏覽器將會把OffsetParent屬性指向Body元素，而且IE對OffsetLeft取值不同），在行內標簽內嵌入行內標簽這種情況下，問題尤為明顯（各個瀏覽器對OffsetLeft屬性的取值就都有差異了，無理可循）。
好了，offsetLeft就講完了，我們繼續(xù)看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規(guī)范的一部分，但是目前的瀏覽器都實現了它們，這幾個屬性也是實現Javascript拖拽功能的核心元素。因此一定要深入理解它們。
下一篇將講講事件中的相關屬性。

最新評論