詳細(xì)介紹jQuery.outerWidth() 函數(shù)具體用法
下面我們來通過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對(duì)象(實(shí)例)，并且對(duì)不可見的元素依然有效。語法jQuery 1.2.6 新增該函數(shù)。jQueryObject.outerWidth( [ includeMargin ] )注意：如果當(dāng)前jQuery對(duì)象匹配多個(gè)元素，則只返回第一個(gè)匹配的元素的外寬度。參數(shù)參數(shù) 描述includeMargin 可選/Boolean類型指示是否包含外邊距部分的寬度，默認(rèn)為false。返回值outerWidth()函數(shù)的返回值為Number類型，返回第一個(gè)匹配元素的外寬度。如果當(dāng)前jQuery對(duì)象匹配多個(gè)元素，返回外寬度時(shí)，outerWidth()函數(shù)只以其中第一個(gè)匹配的元素為準(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");
// 如果匹配多個(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ù)，希望大家能夠喜歡。
相關(guān)文章
IDEA配置jQuery, $符號(hào)不再顯示黃色波浪線的問題
這篇文章主要介紹了IDEA配置jQuery, $符號(hào)不再顯示黃色波浪線的問題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10
jQuery實(shí)現(xiàn)簡易的天天愛消除小游戲
貌似最近騰訊手機(jī)游戲天天愛消除挺火的，我也是粉絲之一，最近對(duì)javascript一直比較感興趣然后想用js仿造一個(gè)，應(yīng)該不是太難，2015-10-10
jQuery Datatables 動(dòng)態(tài)列+跨列合并實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Datatables 動(dòng)態(tài)列+跨列合并實(shí)現(xiàn)代碼,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了JQuery做的一個(gè)簡單的點(diǎn)燈游戲分享,點(diǎn)燈游戲是一個(gè)十分有趣的智力游戲,需要的朋友可以參考下2014-07-07
Jquery實(shí)現(xiàn)側(cè)邊欄跟隨滾動(dòng)條固定（兼容IE6）
側(cè)邊欄隨滾動(dòng)條上下滾動(dòng)，始終固定在一個(gè)位置的功能，現(xiàn)在很多網(wǎng)站和博客都有這個(gè)功能2014-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)視頻展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
基于jquery實(shí)現(xiàn)的表格分頁實(shí)現(xiàn)代碼
該方法的運(yùn)用是從后臺(tái)數(shù)據(jù)庫中一次性取出所有的數(shù)據(jù)，運(yùn)用Jquery把一部分?jǐn)?shù)據(jù)隱藏起來，事實(shí)上數(shù)據(jù)還是全部在html頁面中2011-06-06
Jquery easyui 實(shí)現(xiàn)動(dòng)態(tài)樹
本文給大家介紹jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹，本文通過代碼實(shí)例相結(jié)合的方式給大家展示jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹的過程，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jquery實(shí)現(xiàn)checkbox 全選/全不選的通用寫法
本篇文章主要是對(duì)jquery實(shí)現(xiàn)checkbox 全選/全不選的通用寫法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單彈幕制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12