JQuery獲取元素文檔大小、偏移和位置和滾動條位置的方法集合
更新時間:2010年01月12日 00:51:23 作者:
在ajax中經(jīng)常需要對元素的位置進(jìn)行精確的定位,此時不僅需要獲取元素自身的大小位置等屬性。還需要知道頁面、瀏覽器、滾動條等的長度和寬度。
因?yàn)闉g覽器的兼容問題,如果使用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 點(diǎn)擊元素后,滾動條滾動至該元素位置的方法
- jquery實(shí)現(xiàn)的圖片點(diǎn)擊滾動效果
- 基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動
- 一個JQuery寫的點(diǎn)擊上下滾動的小例子
- JQuery獲取元素尺寸、位置及頁面滾動事件應(yīng)用示例
- js,jquery滾動/跳轉(zhuǎn)頁面到指定位置的實(shí)現(xiàn)思路
- jQuery實(shí)現(xiàn)將div中滾動條滾動到指定位置的方法
- jQuery實(shí)現(xiàn)平滑滾動到指定錨點(diǎn)的方法
- 使用jquery animate創(chuàng)建平滑滾動效果(可以是到頂部、到底部或指定地方)
- 通過JQuery將DIV的滾動條滾動到指定的位置方便自動定位
- 利用jquery制作滾動到指定位置觸發(fā)動畫
- jQuery實(shí)現(xiàn)點(diǎn)擊滾動到指定元素上的方法分析
相關(guān)文章
基于jquery的選擇標(biāo)簽至文本域效果,可多選/可過濾重復(fù)/可限制個數(shù)的實(shí)現(xiàn)代碼
選擇標(biāo)簽至表單域插件, 基于jQuery, 可多選/可過濾重復(fù)/可限制個數(shù). 是以前的項(xiàng)目中用到過的一個項(xiàng)目, 當(dāng)初是用原生js東拼西湊的, 用jQuery重寫了下,已封裝成插件.2010-11-11jQuery中bind與live的用法及區(qū)別小結(jié)
本篇文章主要是對jQuery中bind與live的用法以及區(qū)別進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01EasyUI學(xué)習(xí)之Combobox級聯(lián)下拉列表(2)
這篇文章主要為大家詳細(xì)介紹了EasyUI學(xué)習(xí)之Combobox級聯(lián)下拉列表的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12BootStrap網(wǎng)頁中代碼顯示<code><pre>用法詳解
網(wǎng)頁中代碼的顯示,包括行中代碼顯示;成段的代碼顯示.本文給大家介紹bootstrap網(wǎng)頁中代碼顯示<code><pre>用法詳解,感興趣的朋友一起看看吧2016-10-10jQuery setTimeout()函數(shù)使用方法
setTimeout在以前的js中是定時執(zhí)行一個對象或函數(shù),下面我來介紹jquery中的setTimeout函數(shù)使用方法有需要了解的朋友仔細(xì)的參考參考2013-04-04jQuery學(xué)習(xí)筆記 操作jQuery對象 屬性處理
HTML文檔,不但有一系列語義標(biāo)簽,每個標(biāo)簽下屬還有一系列屬性節(jié)點(diǎn)。自然我們也想去操作這些屬性節(jié)點(diǎn)。格式仍然為$(selector).方法2012-09-09jquery獲取select,option所有的value和text的實(shí)例
下面小編就為大家?guī)硪黄猨query獲取select,option所有的value和text的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03