下面我們來通過jQuery實(shí)例代碼演示outerWidth()函數(shù),
outerWidth()函數(shù)用于設(shè)置或返回當(dāng)前匹配元素的外寬度。外寬度默認(rèn)包括元素的內(nèi)邊距(padding)、邊框(border),但不包括外邊距(margin)部分的寬度。你也可以指定參數(shù)為true,以包括外邊距(margin)部分的寬度。如下圖:
如果你要獲取其它情況的寬度,請使用width()和innerWidth(),你可以點(diǎn)此查看三者之間的區(qū)別。該函數(shù)屬于jQuery對象(實(shí)例),并且對不可見的元素依然有效。語法jQuery 1.2.6 新增該函數(shù)。jQueryObject.outerWidth( [ includeMargin ] )注意:如果當(dāng)前jQuery對象匹配多個(gè)元素,則只返回第一個(gè)匹配的元素的外寬度。參數(shù)參數(shù) 描述includeMargin 可選/Boolean類型指示是否包含外邊距部分的寬度,默認(rèn)為false。返回值outerWidth()函數(shù)的返回值為Number類型,返回第一個(gè)匹配元素的外寬度。如果當(dāng)前jQuery對象匹配多個(gè)元素,返回外寬度時(shí),outerWidth()函數(shù)只以其中第一個(gè)匹配的元素為準(zhǔn)。如果沒有匹配的元素,則返回null。outerWidth()不適用于window和document,請使用width()替代。示例&說明以下面這段HTML代碼為例:
以下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");
// 如果匹配多個(gè)元素,只返回第一個(gè)元素的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
以上內(nèi)容詳細(xì)介紹了jQuery.outerWidth() 函數(shù),希望大家能夠喜歡。
新聞熱點(diǎn)
疑難解答