国产视频app上一篇博文說了,我們可以利用JQ中的offset()方法獲取或賦值給一個指定元素在視窗中的偏移的坐標值,那么就今天記錄一下JQ中的position()方法,這個方法與上一篇說的offset()方法有很多相似的地方

jQuery中position()方法

国产视频appjQuery中position()方法:獲取或賦值給指定元素相當于元素的坐標值的方法

語法:

$(selector).position();

注:同樣它也有兩個屬性值,一個是left,一個top,單位都PX像素

讓我們來舉個栗子

利用jQuery中position()方法獲取坐標

利用jQuery中position()方法獲取坐標

代碼示例圖

html代碼

<div class="mochu">
    <p class="elemnt">
        這里P標簽元素的內容!
    </p>
</div>

CSS代碼

利用jQuery中position()方法獲取坐標

CSS代碼示例圖

.mochu{
    position:absolute;
    height:200px;
    width:200px;
    top:50px;
    left:50px;
    background-color: brown;
}
.elemnt{
    left: 10px;
    top:10px;
    height: 20px;
    line-height: 20px;
    background-color: aqua;
    color: rgb(4, 12, 12);
}

JQ代碼

$("#mochu").click(function(){
    var $position = $(".elemnt").position();
    alert("上為:"+$position.top+"px  "+"左為:"+$position.left+"px");
})

結果如下:

利用jQuery中position()方法獲取坐標

offset()方法與position()方法區別

国产视频app1、position()方法時事實上是把該元素當絕對定位來處理,獲取的是該元素相當于最近的一個擁有絕對或者相對定位的父元素的偏移位置。

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

国产视频app3、offset()方法不管該元素如何定位,也不管其父元素如何定位,都是獲取的該元素相對于當前視口的偏移