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) 方法返回元素的高度（包括內邊距、邊框和外邊距）。

您可能感興趣的文章:

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