jquery中獲得元素尺寸和坐標的方法整理
更新時間：2014年05月18日 17:31:14 作者：
這篇文章主要介紹了jquery中獲得元素尺寸和坐標的方法,需要的朋友可以參考下
一、獲得坐標
1.offset()
offset() 方法返回或設置匹配元素相對于文檔的偏移（位置）。（即視口坐標）
該方法返回的對象包含兩個整型屬性：top 和 left，以像素計。
此方法只對可見元素有效。
2.position()
position() 方法返回匹配元素相對于父元素的位置（偏移）。(相對于父元素的文檔坐標）
該方法返回的對象包含兩個整型屬性：top 和 left，以像素計。
此方法只對可見元素有效。
3.offsetParent()
offsetParent() 方法返回最近的祖先定位元素。
定位元素指的是元素的 CSS position 屬性被設置為 relative、absolute 或 fixed 的元素。
可以通過 jQuery 設置 position，或者通過 CSS 的 position 屬性。
二、獲得尺寸
1.width() 和 height() 方法
width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
2.innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的寬度（包括內邊距）。
innerHeight() 方法返回元素的高度（包括內邊距）。
3.outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。
outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。
1.offset()
offset() 方法返回或設置匹配元素相對于文檔的偏移（位置）。（即視口坐標）
該方法返回的對象包含兩個整型屬性：top 和 left，以像素計。
此方法只對可見元素有效。
2.position()
position() 方法返回匹配元素相對于父元素的位置（偏移）。(相對于父元素的文檔坐標）
該方法返回的對象包含兩個整型屬性：top 和 left，以像素計。
此方法只對可見元素有效。
3.offsetParent()
offsetParent() 方法返回最近的祖先定位元素。
定位元素指的是元素的 CSS position 屬性被設置為 relative、absolute 或 fixed 的元素。
可以通過 jQuery 設置 position，或者通過 CSS 的 position 屬性。
二、獲得尺寸
1.width() 和 height() 方法
width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
2.innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的寬度（包括內邊距）。
innerHeight() 方法返回元素的高度（包括內邊距）。
3.outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。
outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。
您可能感興趣的文章:
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動條高度實現(xiàn)代碼
- 使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見
- jQuery 拖動層(在可視區(qū)域范圍內)
- JQuery獲取元素尺寸、位置及頁面滾動事件應用示例
- 基于jquery實現(xiàn)圖片相關操作（重繪、獲取尺寸、調整大小、縮放）
- jQuery幫助之CSS尺寸(五)outerHeight、outerWidth
- jQuery+CSS3實現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導航菜單
- 鼠標懸浮顯示二級菜單效果的jquery實現(xiàn)
- jQuery動畫效果animate和scrollTop結合使用實例
- 淺談jQuery頁面的滾動位置scrollTop、scrollLeft
- JQuery獲取可視區(qū)尺寸和文檔尺寸及制作懸浮菜單示例
相關文章
本文主要對單行文本框、多行文本框應用、復選框應用、下拉框應用、表單應用進行實例分析介紹。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
jQuery的擴展方法有兩種方式，一種是jQuery本身的擴展方法，另一種是jQuery所選對象的擴展方法，下面一起來看。2011-10-10
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)飛機大戰(zhàn)游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
本文章來給大家介紹一款固定底網(wǎng)站底部菜單效果，這里是基于jquery的，大家下載之后把jquery加入即可實現(xiàn)效果了，并且兼容性強。2013-08-08
在jQuery1.5中使用deferred對象 著放大鏡看Promise
在那篇經(jīng)典的關于jQuery1.5中Deferred使用方法介紹的文章中（譯文見這里），有下面一段描述2011-03-03
jQuery插件StickUp實現(xiàn)網(wǎng)頁導航置頂
本文給大家介紹的是一款jQuery插件--StickUp，他的主要用途是實現(xiàn)網(wǎng)頁元素固定，如導航固定讓其總是保持在視圖中可見，效果非常不錯，這里推薦給小伙伴們。2015-04-04
自從接觸了jQuery后就為其強大的選擇器所震撼，這也正是jQuery的優(yōu)勢所在2012-02-02
這篇文章主要介紹了jQuery點擊導航欄選中更換樣式的實現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-01-01
本篇文章主要對jQuery聯(lián)動日歷的實例進行解析說明。有興趣的朋友可以下載源碼調試運行試試看，希望對大家有所幫助2016-12-12
使用jQuery實現(xiàn)WordPress中的Ctrl+Enter和@評論回復
相信大家對QQ中的Ctrl+Enter快捷回復和微博上的@指名回復功能都不陌生,在WordPress的評論欄方面我們同樣可以添加這樣的功能,一起來看使用jQuery實現(xiàn)WordPress中的Ctrl+Enter和@評論回復的方法:2016-05-05