jquery中獲得元素尺寸和坐標(biāo)的方法整理

更新時(shí)間：2014年05月18日 17:31:14 作者：

這篇文章主要介紹了jquery中獲得元素尺寸和坐標(biāo)的方法,需要的朋友可以參考下

一、獲得坐標(biāo)

1.offset()

offset() 方法返回或設(shè)置匹配元素相對于文檔的偏移（位置）。（即視口坐標(biāo)）

該方法返回的對象包含兩個(gè)整型屬性：top 和 left，以像素計(jì)。

此方法只對可見元素有效。

2.position()

position() 方法返回匹配元素相對于父元素的位置（偏移）。(相對于父元素的文檔坐標(biāo)）

該方法返回的對象包含兩個(gè)整型屬性：top 和 left，以像素計(jì)。

此方法只對可見元素有效。

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)邊距、邊框和外邊距）。

您可能感興趣的文章:

相關(guān)文章

詳解jQuery中的DOM操作
本文主要對jQuery中的DOM操作進(jìn)行了詳細(xì)全面的介紹。文中舉了簡單例子，便于理解與學(xué)習(xí)，對初學(xué)者具有很好的參考價(jià)值，需要的朋友一起來看下吧
2016-12-12
jQuery的事件預(yù)綁定
這篇文章主要介紹了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)及動態(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)文字無縫滾動效果示例代碼(Marquee插件)
本篇文章主要介紹了JQuery實(shí)現(xiàn)文字無縫滾動效果示例代碼(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)行編程的超級指南
這篇文章主要介紹了使用Browserify配合jQuery進(jìn)行編程的超級指南,Browserify 可以讓你使用類似于node的require()的方式來組織瀏覽器端的JavaScript代碼,需要的朋友可以參考下
2015-07-07
jquery操作select方法匯總
這篇文章主要介紹了jquery操作select方法,實(shí)例匯總了jQuery操作select的讀取、設(shè)置、添加及刪除等技巧,需要的朋友可以參考下
2015-02-02
jQuery Tips 為AJAX回調(diào)函數(shù)傳遞額外參數(shù)的方法
討論這個(gè)問題基于如下場景：點(diǎn)擊頁面上某個(gè)按鈕之后，觸發(fā)click事件，事件處理函數(shù)內(nèi)部發(fā)送一個(gè)AJAX請求，AJAX回調(diào)函數(shù)更新頁面的某一個(gè)部分。
2010-12-12