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()前，你应该先显示父元素。