jquery中獲得元素尺寸和坐標(biāo)的方法整理
更新時(shí)間：2014年05月18日 17:31:14 作者：
這篇文章主要介紹了jquery中獲得元素尺寸和坐標(biāo)的方法,需要的朋友可以參考下
一、獲得坐標(biāo)
1.offset()
offset() 方法返回或設(shè)置匹配元素相對(duì)于文檔的偏移（位置）。（即視口坐標(biāo)）
該方法返回的對(duì)象包含兩個(gè)整型屬性：top 和 left，以像素計(jì)。
此方法只對(duì)可見元素有效。
2.position()
position() 方法返回匹配元素相對(duì)于父元素的位置（偏移）。(相對(duì)于父元素的文檔坐標(biāo)）
該方法返回的對(duì)象包含兩個(gè)整型屬性：top 和 left，以像素計(jì)。
此方法只對(duì)可見元素有效。
3.offsetParent()
offsetParent() 方法返回最近的祖先定位元素。
定位元素指的是元素的 CSS position 屬性被設(shè)置為 relative、absolute 或 fixed 的元素。
可以通過 jQuery 設(shè)置 position，或者通過 CSS 的 position 屬性。
二、獲得尺寸
1.width() 和 height() 方法
width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）。
height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）。
2.innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）。
innerHeight() 方法返回元素的高度（包括內(nèi)邊距）。
3.outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）。
outerWidth(true) 方法返回元素的寬度（包括內(nèi)邊距、邊框和外邊距）。
outerHeight(true) 方法返回元素的高度（包括內(nèi)邊距、邊框和外邊距）。
1.offset()
offset() 方法返回或設(shè)置匹配元素相對(duì)于文檔的偏移（位置）。（即視口坐標(biāo)）
該方法返回的對(duì)象包含兩個(gè)整型屬性：top 和 left，以像素計(jì)。
此方法只對(duì)可見元素有效。
2.position()
position() 方法返回匹配元素相對(duì)于父元素的位置（偏移）。(相對(duì)于父元素的文檔坐標(biāo)）
該方法返回的對(duì)象包含兩個(gè)整型屬性：top 和 left，以像素計(jì)。
此方法只對(duì)可見元素有效。
3.offsetParent()
offsetParent() 方法返回最近的祖先定位元素。
定位元素指的是元素的 CSS position 屬性被設(shè)置為 relative、absolute 或 fixed 的元素。
可以通過 jQuery 設(shè)置 position，或者通過 CSS 的 position 屬性。
二、獲得尺寸
1.width() 和 height() 方法
width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）。
height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）。
2.innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）。
innerHeight() 方法返回元素的高度（包括內(nèi)邊距）。
3.outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）。
outerWidth(true) 方法返回元素的寬度（包括內(nèi)邊距、邊框和外邊距）。
outerHeight(true) 方法返回元素的高度（包括內(nèi)邊距、邊框和外邊距）。
您可能感興趣的文章:
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- 使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見
- jQuery 拖動(dòng)層(在可視區(qū)域范圍內(nèi))
- JQuery獲取元素尺寸、位置及頁面滾動(dòng)事件應(yīng)用示例
- 基于jquery實(shí)現(xiàn)圖片相關(guān)操作（重繪、獲取尺寸、調(diào)整大小、縮放）
- jQuery幫助之CSS尺寸(五)outerHeight、outerWidth
- jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
- 鼠標(biāo)懸浮顯示二級(jí)菜單效果的jquery實(shí)現(xiàn)
- jQuery動(dòng)畫效果animate和scrollTop結(jié)合使用實(shí)例
- 淺談jQuery頁面的滾動(dòng)位置scrollTop、scrollLeft
- JQuery獲取可視區(qū)尺寸和文檔尺寸及制作懸浮菜單示例
相關(guān)文章
本文主要對(duì)jQuery中的DOM操作進(jìn)行了詳細(xì)全面的介紹。文中舉了簡(jiǎn)單例子，便于理解與學(xué)習(xí)，對(duì)初學(xué)者具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了jQuery的事件預(yù)綁定的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
jQuery實(shí)現(xiàn)的自適應(yīng)焦點(diǎn)圖效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自適應(yīng)焦點(diǎn)圖效果,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-08-08
jQuery操作復(fù)選框(CheckBox)的取值賦值實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery操作復(fù)選框(CheckBox)的取值賦值實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-01-01
jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法
這篇文章主要介紹了jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法,涉及jQuery操作xml格式數(shù)據(jù)及表單驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
JQuery實(shí)現(xiàn)文字無縫滾動(dòng)效果示例代碼(Marquee插件)
本篇文章主要介紹了JQuery實(shí)現(xiàn)文字無縫滾動(dòng)效果示例代碼(Marquee插件)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
easyui datagrid 表格中操作欄 按鈕圖標(biāo)不顯示的解決方法
下面小編就為大家?guī)硪黄猠asyui datagrid 表格中操作欄 按鈕圖標(biāo)不顯示的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
使用Browserify配合jQuery進(jìn)行編程的超級(jí)指南
這篇文章主要介紹了使用Browserify配合jQuery進(jìn)行編程的超級(jí)指南,Browserify 可以讓你使用類似于node的require()的方式來組織瀏覽器端的JavaScript代碼,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了jquery操作select方法,實(shí)例匯總了jQuery操作select的讀取、設(shè)置、添加及刪除等技巧,需要的朋友可以參考下2015-02-02
jQuery Tips 為AJAX回調(diào)函數(shù)傳遞額外參數(shù)的方法
討論這個(gè)問題基于如下場(chǎng)景：點(diǎn)擊頁面上某個(gè)按鈕之后，觸發(fā)click事件，事件處理函數(shù)內(nèi)部發(fā)送一個(gè)AJAX請(qǐng)求，AJAX回調(diào)函數(shù)更新頁面的某一個(gè)部分。2010-12-12