jQuery的position（），offset（），scrollTop()/scrollLeft()

最後更新：2014-05-12 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style blog class code c color

---恢複內容開始---

jquery定位函數：offset，position，scrollTop/scrollLeft

（1）offset：擷取當前元素相對於文檔的位移。只對可見元素有效。

(2) position:擷取元素相對於最近的一個position為relative or absolute的元素的祖父節點的相對位移。

（3）scrollTop()/scrollLeft()是分別擷取元素捲軸距頂端的距離。

$(selector).offset()與$(selector).position()都返回包含top、left屬性的對象 top/left的值為number

scrollTop() /scrollLeft()的傳回值也為number類型 scroll()返回該對象本身

參考例子

測試代碼：

<body height="1500px"> <div style="position:relative;margin-top:1000px;height:300px;border:1px solid #0C6;"> <p style="margin:50px;">compute my height</p> </div> </body>

在firebug中得到的結果為：

$(‘div‘).offset() top:1000;left:8; //瀏覽器預設body 與視窗margin 為8px $(‘p‘).offset() top:1051;left:9; $(‘div‘).scrollTop()=0;$(‘div‘).scrollLeft()=0;

$(‘p‘).position();<br>top:0 ;left:0;

這個結果感覺很奇怪，第一二個結果還是意料之中，但是第三個是將捲軸拉到最下方的時算出的結果。

奇怪的事情出現了。

<body style="height:1500px;"> <div style="position:relative;margin-top:1000px;height:300px;"> <p style="padding:50px;">compute my height</p> </div> </body>

$(‘div‘).offset() top:1000;left:8; $(‘p‘).offset() top:1000;left:8; $(‘div‘).scrollTop()=0;$(‘div‘).scrollLeft()=0;

$(‘p‘).position();<br>top:0 ;left:0;

padding不起作用了！！！盒子模型左至右 margin-left |border-left padding-left width padding-right|border-right margin-right

而offset()position() 讀取的值是margin-left(margin-top)+border-left(border-top) padding不在其內

繼續做修改：

<body style="height:1500px;"> <div style="position:relative;margin-top:1000px;height:300px;border:1px solid #666;"> <p style="padding:50px;">compute my height</p> </div> </body>

$(‘div‘).offset()<br>top:1000;left:8;<br> $(‘p‘).offset()<br> top:1017;left:9; <br> //div>p會產生8px的margin $(‘div‘).scrollTop()=0;<br>$(‘div‘).scrollLeft()=0;<br> $(‘p‘).position();<br>top:0 ;left:0;

****行內元素會預設1px間隔

---恢複內容結束---

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

jQuery的position（），offset（），scrollTop()/scrollLeft()

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support