在我們編寫HTML網頁的時候,有些網頁中的DIV元素需要使用到一些偏移的定位,比如說把這一個DIV相對于瀏覽器進行位置的安排。如果我們使用CSS進行設置的話,是很好實現的,但當我們要使用jQuery的時候該如何去做呢

jQuery中offset()方法的使用

jQuery中offset()方法:獲取或設置指定元素在視窗或文章的偏移位置

語法:

$(selector).offset(value)

注:它的value為兩個值一個為left一個為top

示例說明:

利用jQuery的offset()方法獲取一個偏移DIV元素的位置做標

HTML代碼

利用jQuery的offset()方法獲取一個偏移DIV元素的位置做標

<div class="mochu">
    <p>
        這里DIV元素的內容!
    </p>
</div>
<button id="mochu">點我測試</button>

CSS代碼

.mochu{
    left: 100px;
    top: 100px;
    width:400px;
    position: fixed;
}

JQ代碼

$("#mochu").click(function(){
    var $offset = $(".mochu").offset();
    alert("let:"+$offset.left+"  "+"top:"+$offset.top);
})

結果如圖所示:

利用jQuery的offset()方法獲取一個偏移DIV元素的位置做標

注意:利用JQ的offset()獲取坐標值時,必須在有position屬性才會正確獲得設置的Left和top屬性的值,否則只會獲取獲取指定元素相當于文檔偏移的值,也就是瀏覽器默認的top與left的值!

利用jQuery的offset()方法設置元素的偏移位置

HTML代碼

利用jQuery的offset()方法設置元素的偏移位置

<div class="mochu">
    <p>
        這里DIV元素的內容!
    </p>
</div>
<button id="mochu">點我測試</button>

CSS代碼

.mochu{
    position: fixed;
}

jQuery代碼

$("#mochu").click(function(){
    $(".mochu").offset({left:100,top:100});
})

結果如下

未點擊之前

利用jQuery的offset()方法設置元素的偏移位置

點擊之后

利用jQuery的offset()方法設置元素的偏移位置

国产视频appPS:本文章屬于本站原創,如需要轉載請注明來源地與網址