當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery.offset()使用方法总结

發布時間：2024/3/24 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery.offset()使用方法总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jquery.offset()應用背景

很多時候需要對某個div進行定位，或者獲取某個元素相對于document的位置，那么我們會用到jquery.offset()。

獲得元素相對于document的位置

獲得位置是元素相對于document的位置信息，通常可以說是這個元素的坐標值。

// 元素相對于document的左位移 $("#haorooms-id").offset().left // 元素相對于document的上位移 $("#haorooms-id").offset().top

設置元素相對于document的位置

$(".haorooms").click(function(){x=$("p").offset();$("#span1").text(x.left);$("#span2").text(x.top); });

這個案例是我們在點擊haorooms標簽的時候，在id=span1和id=span2上面顯示p標簽的left值和top值。

也可以用數組方式設置haorooms-id的位置，如下

// 設置元素相對于document的位移，該元素的position必須為非static值 $("#haorooms-id").offset({left:123,top:99});

注意：

需要注意的是，offset的設置值，必須成對出現，否則會報錯的哦！

offset不僅可以設置單個元素，也可以設置多個元素不同的坐標值，而不需要jQuery.each操作了，如：

$(".haorooms-class").offset(function(index,haorooms) {// index為元素索引// haorooms為元素的坐標：top、left// 函數必須返回坐標值return {top:haorooms.top+index,left:haorooms.left+index}; });

demo案例解釋，案例應用

寫代碼沒有案例，說不清楚，下面我舉一個offset的案例，首先舉一個學習的簡單例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>haorooms博客-jquery.offset()使用方法總結</title> </head> <body><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var a= $("p").offset().left; alert(a);$("button").click(function(){$("p").offset({top:100,left:0});}); }); </script> </head> <body> <p>haorooms博客便宜案例.</p> <button>設置新的偏移</button></body> </html>

上面案例中，p標簽我沒有寫任何樣式，如下圖：

點擊按鈕之后，設置便宜之后，會出現一個相對的定位，如下圖：

var a=$("p").offset().left; alert(a);

是獲取p標簽左側的位置！

通過這個案例，你對jquery.offset()了解了多少呢？

jquery.offset()應用

offset()應用的應用很多，你做tips定位的時候，或者彈出圖層定位的時候，通常會用的到，本來想舉幾個案例呢，還是下次再貼上吧！大家先看看上面的解釋~~~

深度理解Jquery 中 offset() 方法

一、語法

1、返回偏移坐標$(selector).offset();top: $(selector).offset().top;left: $(selector).offset().left;2、設置偏移坐標：$(selector).offset({top:value,left:value});參數的含義：{top:value,left:value} 當設置偏移時是必需的。規定以像素為單位的 top 和 left 坐標。可能的值：(1)、名/值對，比如 {top:100,left:100} ， (2)、一個帶有 top 和 left 的對象（實例）3、使用函數設置偏移坐標：$(selector).offset(function(index,currentoffset));可選。規定返回包含 top 和 left 坐標的對象的函數。index - 返回集合中元素的 index 位置。currentoffset - 返回被選元素的當前坐標。

二、offset 的定義和用法

offset() 方法設置或返回被選元素相對于文檔的偏移坐標1、當用于返回偏移時：該方法返回第一個匹配元素的偏移坐標，它返回一個帶有2個屬性( 以像素為單位的 top 和 left 位置)的對象2、當用于設置偏移時：該方法設置所有匹配元素的偏移坐標，

三、實例

<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){//名/值對 $("button").click(function(){ $("p").offset({top:200,left:200}); });//對象 $("button").click(function(){ newPos=new Object(); newPos.left="0"; newPos.top="100"; $("p").offset(newPos); });//函數 $("p").offset(function(n,c){ newPos=new Object(); newPos.left=c.left+100; newPos.top=c.top+100; return newPos; });}); </script> </head> <body><p style="border:1px solid red">這是一段.</p> <button>設置p元素的偏移坐標/button></body> </html>

四、注意事項

offset() 方法返回的top , left. 跟 margin-top,margin-left 也有關系。如果元素有margin-top,margin-left. 它獲取當前的margin. 沒有則是默認取值。如果父元素也有margin,broder 的話。它也會受到影響。取值要更大。因為offset() 取的當前與文檔的偏移坐標。

做什么事貴在堅持, 什么事都怕認真. 只要你認真起來你就能成功！

總結

以上是生活随笔為你收集整理的jquery.offset()使用方法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。