[jQuery] Dimensions Plugin - 基礎範例 (掌握元素的定位及大小) jQuery

wmh

jQuery Dimensions Plugin
http://brandonaaron.net/docs/dimensions/
取得元素位置、長、寬、高的好工具

Dimensions Plugin 的功能已經在 jQuery 1.2.6 以後加入 jQuery 的核心了，如果您用的 jQuery 版本低於 1.2.6 才會需要另外載入這個 plugin

用 JavaScript 寫互動式 UI 時，經常會需要取得網頁上某個 element 的位置或大小，這時候一個好的函式庫就很重要啦，不用自己去判斷 element 是否被包在其他 container 內、container 是否有 offset、以及不同瀏覽器之間可能需要使用不同的方法等等的各種問題。jQuery 的這個 Dimensions Plugin 已經很廣泛地被其他寫 UI 類 plugin 所使用的一個基礎的 plugin，由於非常受到歡迎、使用度高，因此在 jQuery 未來的版本中將來會直接把這個 plugin 加入到 jQuery 的核心(jQuery 1.2.6 已加入 Dimensions )。

先來看看 Dimensions Plugin 所提供的一些功能。

Part 1: Document & Window

//取得文件可視範圍的高度
$(window).height();

//取得文件可視範圍的寬度 
$(window).width();

//取得整個文件的高度 
$(doucment).height();

//取得整個文件的寬度 
$(doucment).width();

---

Part 2: Element

歡迎來到 jsGears.com
這是測試用元素: #elem1
padding: 3px, margin: 4px, border: 5px
可以隨意拖曳, 也可以放大縮小喔

//取得 #elem1 的高度 
$('#elem1').height();

//取得  #elem1 的寬度 
$('#elem1').width();

//取得 #elem1 的內部高度 (加上 padding)
$('#elem1').innerHeight();

//取得  #elem1 的內部寬度 (加上 padding) 
$('#elem1').innerWidth();

//取得 #elem1 的外部高度 (加上 padding 和 border)
$('#elem1').outerHeight();

//取得  #elem1 的外部寬度 (加上 padding 和 border) 
$('#elem1').outerWidth();

//取得 #elem1 的外部高度再加上 margin
$('#elem1').outerHeight({ margin: true });

//取得  #elem1 的外部寬度再加上 margin
$('#elem1').outerWidth({ margin: true });

---

Part 3: Scroll Offsets

歡迎來到 jsGears.com
這是測試用元素: #elem2

jsGears.com 有越來越多的 JavaScript/jQuery 教學及範例，歡迎舊雨新知一起來參與。

//設定 #elem2 的垂直捲動
$('#elem2').scrollTop(50);

//取得 #elem2 垂直捲動的值
$('#elem2').scrollTop();

//設定 #elem2 的水平捲動
$('#elem2').scrollLeft(50);

//取得 #elem2 水平捲動的值
$('#elem2').scrollLeft();

---

Part 4: Offset

歡迎繼續觀看 jsGears.com 的範例
這是測試用元素: #elem3

這是測試用元素: #elem4
一樣是可以拖曳的喔～

//取得 #elem4 左上角的位置
$('#elem4').offset();

//取得 #elem4 在 parent 內的位置
$('#elem4').position();