jquery的width()方法获取到的宽度是不包含元素的padding值、margin值、以及border值的
元素在实际宽度需要采用其他方法来获取
如下:
outerWidth()函数用于设置或返回当前匹配元素的外宽度。
外宽度默认包括元素的内边距(padding)、边框(border),但不包括外边距(margin)部分的宽度。你也可以指定参数为true,以包括外边距(margin)部分的宽度。如下图:
如果你要获取其它情况的宽度,请使用width()和innerWidth(),你可以点此查看三者之间的区别。
outerWidth(options)
获取第一个匹配元素外部宽度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
返回值:Integer
参数:
options(Boolean) : (false) 设置为 true 时,计算边距在内。
示例:
获取第一段落外部宽度。
HTML 代码:
jQuery 代码:
var w = $("#test").outerWidth(true);
$("#test").html(w);
结果:
outerHeight(options)
获取第一个匹配元素外部高度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
返回值:Integer
参数:
options(Boolean) : (false) 设置为 true 时,计算边距在内。
示例:
获取第一段落外部高度。
HTML 代码:
jQuery 代码:
var h = $("#test").outerHeight(true);
$("#test").html(h);
结果: