jquery 获取元素的 实际宽度和高度

  • Post author:
  • Post category:其他



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)部分的宽度。如下图:


jQuery-outerWidth-schematic-diagram.png

如果你要获取其它情况的宽度,请使用

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: collapse

CSS属性可能会产生意外结果。

Additional Notes:

  • 尺寸相关的API返回的数字,包括

    .outerWidth()

    ,在某些情况下可能是小数。你的代码不应该假定它是一个整数。 另外,当页面被用户放大或缩小时,尺寸可能不正确的;浏览器没有公开的API来检测这种情况。
  • 当元素的父元素被隐藏时,

    .outerWidth()

    得到的值不能保证准确。要得到准确的值,在使用

    .outerWidth()

    前,你应该先显示父元素。