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