DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS OffsetParent屬性深入解析
JS OffsetParent屬性深入解析
編輯:關於JavaScript     

offsetParent屬性返回一個對象的引用,這個對象是距離調用offsetParent的元素最近的(在包含層次中最靠近的),並且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素(在標准兼容模式下為html元素;在怪異呈現模式下為body元素)的引用。 當容器元素的style.display 被設置為 "none"時(譯注:IE和Opera除外),offsetParent屬性 返回 null。

句法:
parentObj = element.offsetParent

變量:
· parentObj 是一個元素的引用,當前元素的偏移量在其中計算。
復制代碼 代碼如下:
<!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

結論:
當某個元素及其DOM結構層次中元素都未進行CSS定位時(absolute或者relative)[或者某個元素進行CSS定位時而DOM結構層次中元素都未進行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定位的元素。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved