JS OffsetParent屬性深入解析

來源:互聯網
上載者:User

 本篇文章要是對JS中的OffsetParent屬性進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所 協助

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定位的元素。 
相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。