快捷導(dǎo)航

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ì)可見(jiàn)元素有效。

2.position()

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

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

此方法只對(duì)可見(jiàn)元素有效。

3.offsetParent()

offsetParent() 方法返回最近的祖先定位元素。

定位元素指的是元素的 CSS position 屬性被設(shè)置為 relative、absolute 或 fixed 的元素。

可以通過(guò) jQuery 設(shè)置 position，或者通過(guò) 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簡(jiǎn)單的表單應(yīng)用
本文主要對(duì)單行文本框、多行文本框應(yīng)用、復(fù)選框應(yīng)用、下拉框應(yīng)用、表單應(yīng)用進(jìn)行實(shí)例分析介紹。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
Jquery 的擴(kuò)展方法總結(jié)
jQuery的擴(kuò)展方法有兩種方式，一種是jQuery本身的擴(kuò)展方法，另一種是jQuery所選對(duì)象的擴(kuò)展方法，下面一起來(lái)看。
2011-10-10
jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
jquery固定底網(wǎng)站底部菜單效果
本文章來(lái)給大家介紹一款固定底網(wǎng)站底部菜單效果，這里是基于jquery的，大家下載之后把jquery加入即可實(shí)現(xiàn)效果了，并且兼容性強(qiáng)。
2013-08-08
在jQuery1.5中使用deferred對(duì)象著放大鏡看Promise
在那篇經(jīng)典的關(guān)于jQuery1.5中Deferred使用方法介紹的文章中（譯文見(jiàn)這里），有下面一段描述
2011-03-03
jQuery插件StickUp實(shí)現(xiàn)網(wǎng)頁(yè)導(dǎo)航置頂
本文給大家介紹的是一款jQuery插件--StickUp，他的主要用途是實(shí)現(xiàn)網(wǎng)頁(yè)元素固定，如導(dǎo)航固定讓其總是保持在視圖中可見(jiàn)，效果非常不錯(cuò)，這里推薦給小伙伴們。
2015-04-04
詳解強(qiáng)大的jQuery選擇器之基本選擇器、層次選擇器
自從接觸了jQuery后就為其強(qiáng)大的選擇器所震撼，這也正是jQuery的優(yōu)勢(shì)所在
2012-02-02
jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-01-01
jQuery聯(lián)動(dòng)日歷的實(shí)例解析
本篇文章主要對(duì)jQuery聯(lián)動(dòng)日歷的實(shí)例進(jìn)行解析說(shuō)明。有興趣的朋友可以下載源碼調(diào)試運(yùn)行試試看，希望對(duì)大家有所幫助
2016-12-12
使用jQuery實(shí)現(xiàn)WordPress中的Ctrl+Enter和@評(píng)論回復(fù)
相信大家對(duì)QQ中的Ctrl+Enter快捷回復(fù)和微博上的@指名回復(fù)功能都不陌生,在WordPress的評(píng)論欄方面我們同樣可以添加這樣的功能,一起來(lái)看使用jQuery實(shí)現(xiàn)WordPress中的Ctrl+Enter和@評(píng)論回復(fù)的方法:
2016-05-05