這個系列文章主要是講述實現Javascript拖拽功能的基礎知識,並將在最後給出一個完整的樣本。適合對拖拽完全不懂的人閱讀。
第一篇就先講講Javascript中的offsetParent屬性吧。
支援的瀏覽器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+
element.offsetParent
Summary
offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the root element (html in standards compliant mode; body in quirks rendering mode) is the offsetParent. offsetParent returns null when the element has style.display set to "none".
Syntax
parentObj = element.offsetParent
Parameters
· parentObj is an object reference to the element in which the current element is offset.
Specification
DOM Level 0. Not part of specification.
節選自Mozilla Developer Center網站
翻譯如下:
element.offsetParent
總結
offsetParent屬性返回一個對象的引用,這個對象是距離調用offsetParent的元素最近的(在包含層次中最靠近的),並且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根項目(在標準相容模式下為html元素;在怪異呈現模式下為body元素)的引用。 當容器元素的style.display 被設定為 "none"時(譯註:IE和Opera除外),offsetParent屬性 返回 null 。
句法
parentObj = element.offsetParent
變數
· parentObj 是一個元素的引用,當前元素的位移量在其中計算。
規範
DOM Level 0. 並非規範的一部分.
測試代碼1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript" language="JavaScript"> function offset_init(){ var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent; alert(parentObj.tagName); } </script> </head> <body onload="offset_init()"> <div id="parent"> <p id="sonObj">測試OffsetParent屬性</p> </div> </body> </html> |
測試結果:
Firefox3:"BODY"
Internet Explorer 7:"BODY"
Opera 9.51:"BODY"
Chrome 0.2:"BODY"
Safari 3:"BODY"
結論:
當某個元素及其父元素都未進行CSS定位時,則這個元素的offsetParent屬性的取值為根項目。更確切地說,這個元素的各種位移量計算(offsetTop、offsetLeft等)的參照物為Body元素。(其實無論時標準相容模式還是怪異模式,根項目都為Body元素)
測試代碼2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> #parent{ position:absolute; <!--position:relative;--> left:25px; top:188px; border:1px solid black; } </style> <script type="text/javascript" language="JavaScript"> function offset_init(){ var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent; alert(parentObj.tagName); } </script> </head> <body onload="offset_init()"> <div id="parent">div測試代碼<p id="sonObj">測試OffsetParent屬性</p></div> </body> </html> |
測試結果:
Firefox3:"DIV"
Internet Explorer 7:"DIV"
Opera 9.51:"DIV"
Chrome 0.2:"DIV"
Safari 3:"DIV"
結論:
當某個元素的父元素進行了CSS定位時(absolute或者relative),則這個元素的offsetParent屬性的取值為其父元素。更確切地說,這個元素的各種位移量計算(offsetTop、offsetLeft等)的參照物為其父元素。
測試代碼3:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> #Grandfather{ position:relative; left:25px; top:188px; border:1px solid black; } </style> <script type="text/javascript" language="JavaScript"> function offset_init(){ var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent; alert(parentObj.tagName); } </script> </head> <body onload="offset_init()"> <h1 id="Grandfather"> <div id="parent"> <p id="sonObj">測試OffsetParent屬性</p> </div> </h1> </body> </html> |
測試結果:
Firefox3:"H1"
Internet Explorer 7:"H1"
Opera 9.51:"H1"
Chrome 0.2:"H1"
Safari 3:"H1"
結論:
當某個元素及其父元素都未進行CSS定位時(absolute或者relative),則這個元素的offsetParent屬性的取值為在DOM結構層次中距離其最近,並且已進行了CSS定位的元素。
測試代碼4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> #sonObj{ position:relative; left:25px; top:188px; border:1px solid black; } </style> <script type="text/javascript" language="JavaScript"> function offset_init(){ var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent; alert(parentObj.tagName); } </script> </head> <body onload="offset_init()"> <h1 id="Grandfather"> <div id="parent"> <p id="sonObj">測試OffsetParent屬性</p> </div> </h1> </body> </html> |
測試結果:
Firefox3:"BODY"
Internet Explorer 7:"BODY"
Opera 9.51:"BODY"
Chrome 0.2:"BODY"
Safari 3:"BODY"
結論:
當只有某個元素進行了CSS定位,其父元素及其DOM結構層次上都未進行CSS定位時,則這個元素的offsetParent屬性的取值為HTMLBODYElement。更確切地說,這個元素的各種位移量計算(offsetTop、offsetLeft等)的參照物為Body元素。
好了,offsetParent屬性就講到這了。