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

原文地址:   http://jsgears.com/viewthread.php?tid=76

《[jQuery] Dimensions Plugin - 基礎範例 (掌握元素的定位及大小)》 jQuery Dimensions Plugin
《[jQuery] Dimensions Plugin - 基礎範例 (掌握元素的定位及大小)》 http://brandonaaron.net/docs/dimensions/
《[jQuery] Dimensions Plugin - 基礎範例 (掌握元素的定位及大小)》 取得元素位置、長、寬、高的好工具

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

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

Part 1: Document & Window

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

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

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

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

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

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

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

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


Part 2: Element

歡迎來到 jsGears.com
這是測試用元素: #elem1
padding: 3px, margin: 4px, border: 5px
可以隨意拖曳, 也可以放大縮小喔
  1. //取得 #elem1 的高度    
  2. $(‘#elem1’).height();  
//取得 #elem1 的高度 
$('#elem1').height();

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

  1. //取得  #elem1 的寬度    
  2. $(‘#elem1’).width();  
//取得  #elem1 的寬度 
$('#elem1').width();

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

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

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

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

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

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

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

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

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

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

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

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

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


Part 3: Scroll Offsets

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

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

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

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

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

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

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

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

  1. //取得 #elem2 水平捲動的值   
  2. $(‘#elem2’).scrollLeft();  


发表评论

您的电子邮箱地址不会被公开。

7 + 1 =