Jquery中offset和position的區別分析

2022-03-23 05:02:03 字數 5156 閱讀 9799

1樓:千鋒教育

一、jquery中offset()

獲取匹配元素在當前視口的相對偏移。 總是計算相對於文件的位置,無論元素的父元素或祖先元素的position屬性是什麼。

返回的物件包含兩個整形屬性:top 和 left。此方法只對可見元素有效。

例子:123

4567

891011

1213

1415

1617

hello

2nd paragraph

二、jquery中position()

獲取匹配元素相對父元素的偏移。 更通俗一點,含有position:relative的元素的最近的父元素或祖先元素---的位置。

如果未能找到這樣的父元素或祖先元素,那麼會計算相對於文件(即視區左上角)的位置. 返回的物件包含兩個整形屬性:top 和 left。

為精確計算結果,請在補白、邊框和填充屬性上使用畫素單位。

hello

2樓:樂跑小子

position()獲取相對於它最近的具有相對位置(position:relative或position:absolute)的父級元素的距離,如果找不到這樣的元素,則返回相對於瀏覽器的距離。

offset()始終返回相對於瀏覽器文件的距離,它會忽略外層元素。

下邊看個簡單的例子,這裡外層的div元素(position:relative)僅一個:

//獲取相對於最近的父級(position:relative或position:absolute)的位置

var vposition = $("#inner").position();

alert(vposition.left); //輸出:50

alert(vposition.top); //輸出:60

var voffset = $("#inner").offset();

alert(voffset.left); //輸出:$("#outer").offset().left+50

alert(voffset.top); //輸出:$("#outer").offset().top+60

在不同瀏覽器中,offset()得到的相對於瀏覽器的位置不同,相信你看了上邊相應的註釋,已經掌握了position()同offset()方法的區別。

jquery中offset和position的區別

3樓:育知同創教育

jquey中的兩個方法都返回一個包含兩個屬性的物件-左邊距和上邊距,它們兩個的不同點在於位置的相對點不同。

具體區別為:

1、position()獲取相對於它最近的具有相對位置(position:relative)的父級元素的距離,如果找不到這樣的元素,則返回相對於瀏覽器的距離。offset()始終返回相對於瀏覽器文件的距離,它會忽略外層元素。

2、在不同瀏覽器中,offset()得到的相對於瀏覽器的位置不同,相信你看了上邊相應的註釋,已經掌握了position()同offset()方法的區別。

舉例說明:

//獲取相對於最近的父級(position:relative)的位置

var vposition = $("#inner").position();

alert(vposition.left);   //輸出:50

alert(vposition.top);    //輸出:60

var voffset = $("#inner").offset();

alert(voffset.left);   //輸出:$("#outer").offset().left+50

alert(voffset.top);    //輸出:$("#outer").offset().top+60

4樓:匿名使用者

1、offset()方法獲取匹配元素在當前視窗的相對偏移量。這裡的視窗指的是當前頁面的視窗,不包括瀏覽器的選單欄等,當然我們也不太需要使用jquery來控制整個瀏覽器,我們所要控制的是頁面視窗。

2、position()方法獲取匹配元素相對父元素的偏移量。即獲取的是該元素相對於最近的一個擁有絕對定位或者相對定位的父元素的偏移量。如果所有的父元素都是預設的static定位方式,則其處理方式和offset()一樣,是當前視窗的偏移量。

3、使用position()方法時如果其所有的父元素都為預設定位(static)方式,則其處理方式和offset()一樣,是當前視窗的相對偏移

4、使用offset()方法不管該元素如何定位,也不管其父元素如何定位,都是獲取的該元素相對於當前視口的偏移。

5、一般情況下,如果要顯示的元素b存放在元素a的同一父元素下(即b為a的兄弟節點),這個時候使用position() 是最合適的;如果顯示的元素b存放在dom的最頂端或者最底端(即其父元素就是body)。這個時候用offset()是最好的。

jquery中offset和position的區別

5樓:城南明月羿當年

jquery中position()與offset()區別

position()獲取相對於它最近的具有相對位置(position:relative或position:absolute)的父級元素的距離,如果找不到這樣的元素,則返回相對於瀏覽器的距離。

offset()始終返回相對於瀏覽器文件的距離,它會忽略外層元素。

下邊看個簡單的例子,這裡外層的div元素(position:relative)僅一個:

//獲取相對於最近的父級(position:relative或position:absolute)的位置

var vposition = $("#inner").position();

alert(vposition.left); //輸出:50

alert(vposition.top); //輸出:60

var voffset = $("#inner").offset();

alert(voffset.left); //輸出:$("#outer").offset().left+50

alert(voffset.top); //輸出:$("#outer").offset().top+60

在不同瀏覽器中,offset()得到的相對於瀏覽器的位置不同,相信你看了上邊相應的註釋,已經掌握了position()同offset()方法的區別。

6樓:千鋒教育

1、position()獲取相對於它最近的具有相對位置(position:relative或position:absolute)的父級元素的距離,如果找不到這樣的元素,則返回相對於瀏覽器的距離。

2、offset()始終返回相對於瀏覽器文件的距離,它會忽略外層元素。

例如://獲取相對於最近的父級(position:relative或position:absolute)的位置

var vposition = $("#inner").position();

alert(vposition.left); //輸出:50

alert(vposition.top); //輸出:60

var voffset = $("#inner").offset();

alert(voffset.left); //輸出:$("#outer").offset().left+50

alert(voffset.top); //輸出:$("#outer").offset().top+60

在不同瀏覽器中,offset()得到的相對於瀏覽器的位置不同

前端position屬性中ralative和absulute的區別

7樓:聯雅網路

absolute指絕對位置,就是說設定後該控制元件是固定在頁面的某處,不會因別的控制元件的大小變化而影響到其分佈位置的改變。

position指一般位置,就是說設定後該控制元件在無別的控制元件的影響下,其位置位於設定的地方。如果別的控制元件的大小佔用了設定的位置,那麼原先就會讓出位置。

relative指相對位置,就是相對來說的,比如控制元件與控制元件之間的相對位置,控制元件與面頁的相對位置,打個比方,控制元件a和控制元件b是相對位置,那麼當控制元件a的位置發生改變時,控制元件b 也跟著改變。

jquery中attr和prop的區別分析

8樓:育知同創教育

二者都可以獲取dom的屬性,但是引數不同:

attr : 獲取匹配的元素集合中的第一個元素的屬性的值 或 設定每一個匹配元素的一個或多個屬性。

.attr( attributename, value )

.attr( attributes )

.attr( attributename, function(index, attr) )

.attr( attributename )

.attr( attributename, value )

prop : 獲取匹配的元素集中第一個元素的屬性(property)值或設定每一個匹配元素的一個或多個屬性。

.prop( propertyname, value )

.prop( properties )

.prop( propertyname, function(index, oldpropertyvalue) )

.prop( propertyname )

.prop( propertyname, value )

attr傳入的是attributename,而prop傳入的是propertyname,現在我們的問題轉移了,我們需要研究的是attributename和propertyname之間的區別了。

attributes vs. properties

在這裡,可以將attribute理解為「特性」,property理解為為「屬性」從而來區分倆者的差異。 如果把dom元素看成是一個普通的object物件,這個物件在其定義時就具有一些屬性(property),比如把select的option當做一個物件:

var option =

現在,我們一目瞭然了,attribute是一個特性節點,每個dom元素都有一個對應的attributes屬性來存放所有的attribute節點,它是一個類陣列的容器。attributes的每個數字索引以名值對(name=」value」)的形式存放了一個attribute節點。而property就是一個屬性,是一個以名值對(name=」value」)的形式存放在object中的屬性。

jquery中ready和window onload的區別

你說的 一般是代表jquery物件。onload是html原生事件,用jquery的時候則一般使用 document ready 兩者的區別有 1.執行時間 window.onload必須等到頁面內包括 的所有元素載入完畢後才能執行。document ready 是dom結構繪製完畢後就執行,不必等...

jquery中,size 和length 方法有啥區別

一樣的都是獲取元素的長度,好像length是屬性吧,size 是例項方法 使用為 id size length是例項屬性 使用為 id length 不能新增括號 對於jquery物件來說沒有區別 jquery裡面.length和.size 有什麼區別 length是屬性,size 是方法。如果你只...

jquery中的是什麼意思,jquery中加 是什麼意思

是 jquery 常用的一個回傳函式,定義為 選取 英文是 selector 的縮寫 例子 function 就是 選取 jquery 定義的 function 執行 input 就是 選取 html 當中全部的 input 標籤 abc 就是 選取 html 當中 id 名稱為 abc 的物件 f...