Javascript拖拽&拖放系列文章1之offsetParent屬性


這個系列文章主要是講述實現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 offsetParentoffsetParent 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屬性就講到這了。

至於下一篇寫什么,我暫時還沒想好。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com