曾经写代码中,每当须要获取元素的实际“宽度”(这里的宽度是指元素宽度加上其边距)时,都须要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方法 ,非常好用。

完毕了原来须要用一段来操作做的工作。



这种方法不适用于window 和 document对象,能够使用.width()取代。


以下是其简介


outerWidth(options)


获取第一个匹配元素外部宽度(默认包含补白和边框)。



此方法对可见和隐藏元素均有效。


返回值:Integer 一个整数值 不带"px"


參数:


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>

曾经写代码中,每当须要获取元素的实际“宽度”(这里的宽度是指元素宽度加上其边距)时,都须要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方法 ,非常好用。

完毕了原来须要用一段来操作做的工作。



这种方法不适用于window 和 document对象,能够使用.width()取代。


以下是其简介


outerWidth(options)


获取第一个匹配元素外部宽度(默认包含补白和边框)。



此方法对可见和隐藏元素均有效。


返回值:Integer 一个整数值 不带"px"


參数:


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>