JQuery獲取元素文檔大小、偏移和位置和滾動(dòng)條位置的方法集合
更新時(shí)間：2010年01月12日 00:51:23 作者：
在ajax中經(jīng)常需要對(duì)元素的位置進(jìn)行精確的定位，此時(shí)不僅需要獲取元素自身的大小位置等屬性。還需要知道頁(yè)面、瀏覽器、滾動(dòng)條等的長(zhǎng)度和寬度。
因?yàn)闉g覽器的兼容問題，如果使用javascript獲取這些數(shù)值是一個(gè)相當(dāng)痛苦的過程。好在JQuery提供了簡(jiǎn)單優(yōu)雅，并且兼容的解決方法。
獲取瀏覽器和頁(yè)面文檔的寬度和高度
//獲取瀏覽器顯示區(qū)域的高度
$(window).height();
//獲取瀏覽器顯示區(qū)域的寬度
$(window).width();
//獲取頁(yè)面的文檔高度
$(document.body).height();
//獲取頁(yè)面的文檔寬度
$(document.body).width();
獲取滾動(dòng)條的位置
//獲取滾動(dòng)條到頂部的垂直高度
$(document).scrollTop();
//獲取滾動(dòng)條到左邊的垂直寬度
$(document).scrollLeft();
計(jì)算位置和偏移量
offset方法是一個(gè)很有用的方法，它返回包裝集中第一個(gè)元素的偏移信息。默認(rèn)情況下是相對(duì)body的偏移信息。結(jié)果包含top和left兩個(gè)屬性。
offset(options, results)
options.relativeTo 指定相對(duì)計(jì)算偏移位置的祖先元素。這個(gè)元素應(yīng)該是relative或absolute定位。省略則相對(duì)body。
options.scroll 是否把滾動(dòng)條計(jì)算在內(nèi)，默認(rèn)TRUE
options.padding 是否把padding計(jì)算在內(nèi)，默認(rèn)false
options.margin 是否把margin計(jì)算在內(nèi)，默認(rèn)true
options.border 是否把邊框計(jì)算在內(nèi)，默認(rèn)true
獲取瀏覽器和頁(yè)面文檔的寬度和高度
復(fù)制代碼 代碼如下:
//獲取瀏覽器顯示區(qū)域的高度
$(window).height();
//獲取瀏覽器顯示區(qū)域的寬度
$(window).width();
//獲取頁(yè)面的文檔高度
$(document.body).height();
//獲取頁(yè)面的文檔寬度
$(document.body).width();
獲取滾動(dòng)條的位置
復(fù)制代碼 代碼如下:
//獲取滾動(dòng)條到頂部的垂直高度
$(document).scrollTop();
//獲取滾動(dòng)條到左邊的垂直寬度
$(document).scrollLeft();
計(jì)算位置和偏移量
offset方法是一個(gè)很有用的方法，它返回包裝集中第一個(gè)元素的偏移信息。默認(rèn)情況下是相對(duì)body的偏移信息。結(jié)果包含top和left兩個(gè)屬性。
offset(options, results)
options.relativeTo 指定相對(duì)計(jì)算偏移位置的祖先元素。這個(gè)元素應(yīng)該是relative或absolute定位。省略則相對(duì)body。
options.scroll 是否把滾動(dòng)條計(jì)算在內(nèi)，默認(rèn)TRUE
options.padding 是否把padding計(jì)算在內(nèi)，默認(rèn)false
options.margin 是否把margin計(jì)算在內(nèi)，默認(rèn)true
options.border 是否把邊框計(jì)算在內(nèi)，默認(rèn)true
您可能感興趣的文章:
- jquery 點(diǎn)擊元素后,滾動(dòng)條滾動(dòng)至該元素位置的方法
- jquery實(shí)現(xiàn)的圖片點(diǎn)擊滾動(dòng)效果
- 基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動(dòng)
- 一個(gè)JQuery寫的點(diǎn)擊上下滾動(dòng)的小例子
- JQuery獲取元素尺寸、位置及頁(yè)面滾動(dòng)事件應(yīng)用示例
- js，jquery滾動(dòng)/跳轉(zhuǎn)頁(yè)面到指定位置的實(shí)現(xiàn)思路
- jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法
- jQuery實(shí)現(xiàn)平滑滾動(dòng)到指定錨點(diǎn)的方法
- 使用jquery animate創(chuàng)建平滑滾動(dòng)效果（可以是到頂部、到底部或指定地方）
- 通過JQuery將DIV的滾動(dòng)條滾動(dòng)到指定的位置方便自動(dòng)定位
- 利用jquery制作滾動(dòng)到指定位置觸發(fā)動(dòng)畫
- jQuery實(shí)現(xiàn)點(diǎn)擊滾動(dòng)到指定元素上的方法分析
相關(guān)文章
對(duì)稱加密與非對(duì)稱加密優(yōu)缺點(diǎn)詳解
本文主要介紹了對(duì)稱加密與非對(duì)稱加密的優(yōu)缺點(diǎn)，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
一個(gè)簡(jiǎn)單的jquery彈出框代碼實(shí)現(xiàn)，點(diǎn)擊鏈接彈出模式對(duì)話框，任意點(diǎn)擊網(wǎng)頁(yè)的其它地方可以關(guān)閉彈出框，可以自定義透明度，簡(jiǎn)單實(shí)用的jquery彈出框效果。2015-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery的事件處理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
下面小編就為大家分享一篇jquery中done和then的區(qū)別(詳解)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2017-12-12
Jquery回調(diào)對(duì)象與延遲對(duì)象用法詳解
本文詳細(xì)講解了Jquery回調(diào)對(duì)象與延遲對(duì)象的用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了JQuery通過鍵盤控制鍵盤按下與松開觸發(fā)事件，文章通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
jQuery實(shí)現(xiàn)Ajax功能分析【與Flask后臺(tái)交互】
這篇文章主要介紹了jQuery實(shí)現(xiàn)Ajax功能,結(jié)合實(shí)例形式分析了jQuery ajax功能實(shí)現(xiàn)方法以及與Flask后臺(tái)進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
在初始化jQuery對(duì)象的代碼開始之前聲明了一大堆變量。主要包括：全局變量的備份；處理字符串用的正則表達(dá)式；檢測(cè)瀏覽器的正則表達(dá)式；對(duì)核心函數(shù)的引用備份。這里略過大部分，只說兩種：全局變量和瀏覽器檢測(cè)。2011-05-05
這篇文章主要介紹了jquery中change()用法,實(shí)例分析了change的功能、定義及具體的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
Javascript中封裝window.open解決不兼容問題
window.open不兼容,其實(shí)不是, 因?yàn)椴荒苤苯訄?zhí)行, 必須通過用戶手動(dòng)觸發(fā)才行，下面有個(gè)實(shí)例，大家可以看看2014-09-09