outerWidth()函數(shù)用于設(shè)置或返回當(dāng)前匹配元素的外寬度。外寬度默認(rèn)包括元素的內(nèi)邊距(padding)、邊框(border)，但不包括外邊距(margin)部分的寬度。你也可以指定參數(shù)為true，以包括外邊距(margin)部分的寬度。如下圖：

如果你要獲取其它情況的寬度，請使用width()和innerWidth()。該函數(shù)屬于jQuery對象(實例)，并且對不可見的元素依然有效。語法jQuery 1.2.6 新增該函數(shù)。jQueryObject.outerWidth( [ includeMargin ] )
注意：如果當(dāng)前jQuery對象匹配多個元素，則只返回第一個匹配的元素的外寬度。參數(shù)描述includeMargin 可選/Boolean類型指示是否包含外邊距部分的寬度，默認(rèn)為false。返回值outerWidth()函數(shù)的返回值為Number類型，返回第一個匹配元素的外寬度。
如果當(dāng)前jQuery對象匹配多個元素，返回外寬度時，outerWidth()函數(shù)只以其中第一個匹配的元素為準(zhǔn)。如果沒有匹配的元素，則返回null。outerWidth()不適用于window和document，請使用width()替代。說明以下面這段HTML代碼為例：

代碼如下:

<div id="n1" style="margin:5px; padding: 10px; width:100px; height: 100px; border: 1px solid #000;"></div> <div id="n2" style="width:150px; height: 100px; background: #999;"></div>

以下jQuery示例代碼用于演示outerWidth()函數(shù)的具體用法：

var $n1 = $("#n1"); var $n2 = $("#n2"); outerWidth() = width(100) padding(10*2) border(1*2) = 122 document.writeln( $n1.outerWidth() ); // 122 document.writeln( $n2.outerWidth() ); // 150 var $divs = $("div");

如果匹配多個元素，只返回第一個元素的outerWidth

document.writeln( $divs.outerWidth() ); // 122 outerWidth(true) = width(100) padding(10*2) border(1*2) margin(5*2) = 132 document.writeln( $n1.outerWidth(true) ); // 132

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的详细介绍jQuery.outerWidth() 函数具体用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。