jquery 獲取元素的 實際寬度和高度

jquery outerHeight方法 outerWidth方法

轉： http://www.cnblogs.com/zhja/archive/2012/11/07/2758665.html

 

jquery的width()方法獲取到的寬度是不包含元素的padding值、margin值、以及border值的

元素在實際寬度需要采用其他方法來獲取

如下：

outerWidth()函數用於設置或返回當前匹配元素的外寬度。

外寬度默認包括元素的內邊距(padding)、邊框(border)，但不包括外邊距(margin)部分的寬度。你也可以指定參數為true，以包括外邊距(margin)部分的寬度。如下圖：

如果你要獲取其它情況的寬度，請使用width()和innerWidth()，你可以點此查看三者之間的區別。

 

outerWidth(options) 
獲取第一個匹配元素外部寬度（默認包括補白和邊框）。 
此方法對可見和隱藏元素均有效。 
返回值：Integer 
參數： 
options(Boolean) : (false) 設置為 true 時，計算邊距在內。 
示例： 
獲取第一段落外部寬度。 
HTML 代碼: 
<div> 
<div id="test" style="width:80px;margin:10px;"></div> 
</div> 
jQuery 代碼: 
var w = $("#test").outerWidth(true); 
$("#test").html(w); 
結果: 
<div> 
<div id="test" style="width:80px;margin:10px;">100</div> 
</div> 

outerHeight(options) 
獲取第一個匹配元素外部高度（默認包括補白和邊框）。 
此方法對可見和隱藏元素均有效。 
返回值：Integer 
參數： 
options(Boolean) : (false) 設置為 true 時，計算邊距在內。 
示例： 
獲取第一段落外部高度。 
HTML 代碼: 
<div> 
<div id="test" style="height:20px;margin:10px;"></div> 
</div> 
jQuery 代碼: 
var h = $("#test").outerHeight(true); 
$("#test").html(h); 
結果: 
<div> 
<div id="test" style="height:20px;margin:10px;">40</div> 
</div> 
</div>

 

http://www.css88.com/jqapi-1.9/outerWidth/

.outerWidth( [includeMargin ] )返回：Number

描述： 獲取元素集合中第一個元素的當前計算寬度值,包括padding，border和選擇性的margin。（愚人碼頭注：返回一個整數（不包含“px”）表示的值，或如果在一個空集合上調用該方法，則會返回 null。）

• 添加的版本：1.2.6.outerWidth( [includeMargin ] )

  • includeMargin
    類型：  Boolean
    一個布爾值，表明是否在計算時包含元素的margin值。

返回元素的寬度，一直包括左右 padding值，border值和可選擇性的margin。單位為像素。

如果 includeMargin省略或者false，padding 和 border會被包含在計算中；如果true，margin也會被包含在計算中 。

這個方法不適用於window 和 document對象，可以使用.width()代替。雖然.outerWidth()可以在表格元素上使用， 使用 border-collapse: collapseCSS屬性可能會產生意外結果。

Additional Notes:

• 尺寸相關的API返回的數字，包括 .outerWidth()，在某些情況下可能是小數。你的代碼不應該假定它是一個整數。 另外，當頁面被用戶放大或縮小時，尺寸可能不正確的;瀏覽器沒有公開的API來檢測這種情況。
• 當元素的父元素被隱藏時，.outerWidth()得到的值不能保證准確。要得到准確的值，在使用.outerWidth()前，你應該先顯示父元素。