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