首頁 > 其他

offsetParent演算法分析

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
<br /><!DOCTYPE HTML><br /><html id="html"><br /> <head><br /> <title>offsetParent by 司徒正美</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br /> <script src="mass.js"></p><p> </script><br /> <style type="text/css"><br /> body,html{<br /> height:100%;<br /> background:orange;<br /> }<br /> #relative {<br /> position: relative;<br /> }<br /> div{<br /> width:100px;<br /> height:100px;<br /> background: red;<br /> margin:10px;<br /> }<br /> #aaa,#eee,#iii,#mmm,#qqq{<br /> position: relative;<br /> }<br /> #bbb,#fff,#jjj,#nnn,#rrr{<br /> position: absolute;<br /> }<br /> #ccc,#ggg,#kkk,#ooo,#sss{<br /> position: fixed;<br /> background: blue;<br /> }<br /> #td2 {<br /> position: relative;<br /> }<br /> td{<br /> background: green;<br /> }<br /> form{<br /> margin-left:160px;<br /> }<br /> </style><br /> <script></p><p> window.onload = function(){<br /> var add = "<ul>"<br /> var i = 0<br /> var hash = {<br /> 1: "自身position: relative的DIV元素",<br /> 2: "自身position: absolute的DIV元素",<br /> 3: "自身position: fixed的DIV元素",<br /> 0: "自身position: static的DIV元素"<br /> }<br /> "abcdefghijklmnopqrst".replace(/\w/g, function(id){<br /> i++;<br /> add += "<li>"<br /> if( i < 5){<br /> add += "沒有已定位的父節點，且"<br /> } if(i >= 5 && i < 9){<br /> add += "擁有一個已定位的父節點，且"<br /> }else if( i >= 9 && i < 13){<br /> add += "在table之內，td與table都沒有定位，且"<br /> }else if( i >= 13 && i < 17){<br /> add += "在table之內，td相對定位，且"<br /> }else if( i >= 17){<br /> add += "在table之內，table相對定位，且"<br /> }<br /> add += hash[ i % 4];<br /> id = id + id + id;<br /> var el = document.getElementById(id).offsetParent<br /> var ret = (el && el.id)+"";<br /> switch(ret){<br /> case "html":<br /> add += "的offsetParent為HTML"<br /> break<br /> case "body":<br /> add += "的offsetParent為BODY"<br /> break<br /> case "relative":<br /> add += "的offsetParent為其最近被定位的祖先"<br /> break<br /> case "td":<br /> case "td2":<br /> case "td3":<br /> add += "的offsetParent為其最近的<strong>TD、TH</strong>元素"<br /> break<br /> case "table":<br /> add += "的offsetParent為其最近的<strong>TABLE</strong>元素"<br /> break<br /> default:<br /> add += "的offsetParent為null"<br /> break<br /> }<br /> add += "</li>"<br /> })<br /> add += "</ul>"<br /> console.log(add)<br /> var el = document.createElement("form");<br /> document.body.appendChild( el );<br /> el.innerHTML = add;</p><p> }</p><p> </script><br /> </head><br /> <body id="body"><br /> <blockquote><br /> <div id="aaa"></p><p> </div><br /> <div id="bbb"></p><p> </div><br /> <div id="ccc"></p><p> </div><br /> <div id="ddd"></p><p> </div><br /> </blockquote><br /> <blockquote id="relative"><br /> <div id="eee"></p><p> </div><br /> <div id="fff"></p><p> </div><br /> <div id="ggg"></p><p> </div><br /> <div id="hhh"></p><p> </div><br /> </blockquote><br /> <table border="1" id="table"><br /> <tr><br /> <td id="td"><div id="iii"></div><div id="jjj"></div><div id="kkk"></div><div id="lll"></div></td><br /> </tr><br /> <tr><br /> <td id="td2" ><div id="mmm"></div><div id="nnn"></div><div id="ooo"></div><div id="ppp"></div></td><br /> </tr><br /> </table><br /> <table style="float:left;border:1px solid black; position: relative;" id="table"><br /> <tr><br /> <td id="td3"><div id="qqq"></div><div id="rrr"></div><div id="sss"></div><div id="ttt"></div></td><br /> </tr><br /> </table></p><p> </body><br /></html></p><p>

運行代碼

根據其自身定位情況與父節點的標籤類型與定位情況，分為以下二十種情況（IE8， chrome23, opera12的結果）：

我們可以總結以下幾條規律：

a)position為fixed元素是沒有offsetParent，但firefox統一返回body。b)position為absolute, relative的元素的offsetParent總是為其最近的已定位的元素,沒有找最近的td,th元素，再沒有找body。c)position為static的元素的offsetParent則是先找最近的td,th元素，再沒有找body。d)body為最頂層的offsetParent。

posted on 2012-10-30 17:42 司徒正美 閱讀(...) 評論(...) 編輯 收藏

<br /><!DOCTYPE HTML><br /><html id="html"><br /> <head><br /> <title>offsetParent by 司徒正美</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br /> <script src="mass.js"></p><p> </script><br /> <style type="text/css"><br /> body,html{<br /> height:100%;<br /> background:orange;<br /> }<br /> #relative {<br /> position: relative;<br /> }<br /> div{<br /> width:100px;<br /> height:100px;<br /> background: red;<br /> margin:10px;<br /> }<br /> #aaa,#eee,#iii,#mmm,#qqq{<br /> position: relative;<br /> }<br /> #bbb,#fff,#jjj,#nnn,#rrr{<br /> position: absolute;<br /> }<br /> #ccc,#ggg,#kkk,#ooo,#sss{<br /> position: fixed;<br /> background: blue;<br /> }<br /> #td2 {<br /> position: relative;<br /> }<br /> td{<br /> background: green;<br /> }<br /> form{<br /> margin-left:160px;<br /> }<br /> </style><br /> <script></p><p> window.onload = function(){<br /> var add = "<ul>"<br /> var i = 0<br /> var hash = {<br /> 1: "自身position: relative的DIV元素",<br /> 2: "自身position: absolute的DIV元素",<br /> 3: "自身position: fixed的DIV元素",<br /> 0: "自身position: static的DIV元素"<br /> }<br /> "abcdefghijklmnopqrst".replace(/\w/g, function(id){<br /> i++;<br /> add += "<li>"<br /> if( i < 5){<br /> add += "沒有已定位的父節點，且"<br /> } if(i >= 5 && i < 9){<br /> add += "擁有一個已定位的父節點，且"<br /> }else if( i >= 9 && i < 13){<br /> add += "在table之內，td與table都沒有定位，且"<br /> }else if( i >= 13 && i < 17){<br /> add += "在table之內，td相對定位，且"<br /> }else if( i >= 17){<br /> add += "在table之內，table相對定位，且"<br /> }<br /> add += hash[ i % 4];<br /> id = id + id + id;<br /> var el = document.getElementById(id).offsetParent<br /> var ret = (el && el.id)+"";<br /> switch(ret){<br /> case "html":<br /> add += "的offsetParent為HTML"<br /> break<br /> case "body":<br /> add += "的offsetParent為BODY"<br /> break<br /> case "relative":<br /> add += "的offsetParent為其最近被定位的祖先"<br /> break<br /> case "td":<br /> case "td2":<br /> case "td3":<br /> add += "的offsetParent為其最近的<strong>TD、TH</strong>元素"<br /> break<br /> case "table":<br /> add += "的offsetParent為其最近的<strong>TABLE</strong>元素"<br /> break<br /> default:<br /> add += "的offsetParent為null"<br /> break<br /> }<br /> add += "</li>"<br /> })<br /> add += "</ul>"<br /> console.log(add)<br /> var el = document.createElement("form");<br /> document.body.appendChild( el );<br /> el.innerHTML = add;</p><p> }</p><p> </script><br /> </head><br /> <body id="body"><br /> <blockquote><br /> <div id="aaa"></p><p> </div><br /> <div id="bbb"></p><p> </div><br /> <div id="ccc"></p><p> </div><br /> <div id="ddd"></p><p> </div><br /> </blockquote><br /> <blockquote id="relative"><br /> <div id="eee"></p><p> </div><br /> <div id="fff"></p><p> </div><br /> <div id="ggg"></p><p> </div><br /> <div id="hhh"></p><p> </div><br /> </blockquote><br /> <table border="1" id="table"><br /> <tr><br /> <td id="td"><div id="iii"></div><div id="jjj"></div><div id="kkk"></div><div id="lll"></div></td><br /> </tr><br /> <tr><br /> <td id="td2" ><div id="mmm"></div><div id="nnn"></div><div id="ooo"></div><div id="ppp"></div></td><br /> </tr><br /> </table><br /> <table style="float:left;border:1px solid black; position: relative;" id="table"><br /> <tr><br /> <td id="td3"><div id="qqq"></div><div id="rrr"></div><div id="sss"></div><div id="ttt"></div></td><br /> </tr><br /> </table></p><p> </body><br /></html></p><p>

運行代碼

根據其自身定位情況與父節點的標籤類型與定位情況，分為以下二十種情況（IE8， chrome23, opera12的結果）：

我們可以總結以下幾條規律：

a)position為fixed元素是沒有offsetParent，但firefox統一返回body。b)position為absolute, relative的元素的offsetParent總是為其最近的已定位的元素,沒有找最近的td,th元素，再沒有找body。c)position為static的元素的offsetParent則是先找最近的td,th元素，再沒有找body。d)body為最頂層的offsetParent。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More