詳細(xì)介紹jQuery.outerWidth() 函數(shù)具體用法
下面我們來(lái)通過(guò)jQuery實(shí)例代碼演示outerWidth()函數(shù),
outerWidth()函數(shù)用于設(shè)置或返回當(dāng)前匹配元素的外寬度。外寬度默認(rèn)包括元素的內(nèi)邊距(padding)、邊框(border),但不包括外邊距(margin)部分的寬度。你也可以指定參數(shù)為true,以包括外邊距(margin)部分的寬度。如下圖:
如果你要獲取其它情況的寬度,請(qǐng)使用width()和innerWidth(),你可以點(diǎn)此查看三者之間的區(qū)別。該函數(shù)屬于jQuery對(duì)象(實(shí)例),并且對(duì)不可見(jiàn)的元素依然有效。語(yǔ)法jQuery 1.2.6 新增該函數(shù)。jQueryObject.outerWidth( [ includeMargin ] )注意:如果當(dāng)前jQuery對(duì)象匹配多個(gè)元素,則只返回第一個(gè)匹配的元素的外寬度。參數(shù)參數(shù) 描述includeMargin 可選/Boolean類(lèi)型指示是否包含外邊距部分的寬度,默認(rèn)為false。返回值outerWidth()函數(shù)的返回值為Number類(lèi)型,返回第一個(gè)匹配元素的外寬度。如果當(dāng)前jQuery對(duì)象匹配多個(gè)元素,返回外寬度時(shí),outerWidth()函數(shù)只以其中第一個(gè)匹配的元素為準(zhǔn)。如果沒(méi)有匹配的元素,則返回null。outerWidth()不適用于window和document,請(qǐng)使用width()替代。示例&說(shuō)明以下面這段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)文章
jquery實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)功能
本文主要介紹了用的jqueryRotate插件實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)功能的方法,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jQuery dialog 異步調(diào)用ashx,webservice數(shù)據(jù)的代碼
點(diǎn)擊按鈕,在彈出的jQuery.dialog中,顯示異步返回的數(shù)據(jù)。WebService可以寫(xiě)復(fù)雜的函數(shù),ashx可以根據(jù)傳過(guò)來(lái)的參數(shù)調(diào)用不同的方法,達(dá)到同樣的效果。2010-08-08Jquery實(shí)現(xiàn)的一種常用高亮效果示例代碼
本篇文章只要是對(duì)Jquery實(shí)現(xiàn)的一種常用高亮效果示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01JQUERY 實(shí)現(xiàn)窗口滾動(dòng)搜索框??啃Ч?類(lèi)似滾動(dòng)???
由于分頁(yè)的效果卻又是非常令人厭惡的。滾動(dòng)條無(wú)疑是一種簡(jiǎn)單而又高效的一種方式。而這里,處于對(duì)用戶(hù)體驗(yàn)的考慮,我使用Jquery實(shí)現(xiàn)了一種類(lèi)似滾動(dòng)停靠的效果,感興趣的朋友可以參考下哈2013-03-03easyui messager alert 三秒后自動(dòng)關(guān)閉提示的實(shí)例
下面小編就為大家?guī)?lái)一篇easyui messager alert 三秒后自動(dòng)關(guān)閉提示的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11jQuery實(shí)現(xiàn)選中行變色效果(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)選中行變色效果(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07下拉列表選擇項(xiàng)的選中在不同瀏覽器中的兼容性問(wèn)題探討
使用jquery做了一個(gè)項(xiàng)目,下拉列表選擇項(xiàng)變化時(shí),獲取選中項(xiàng)的文本在不同瀏覽器中的兼容性問(wèn)題在本文將為大家介紹下2013-09-09jquery表單驗(yàn)證框架提供的身份證驗(yàn)證方法(示例代碼)
本篇文章主要介紹了jquery表單驗(yàn)證框架提供的身份證驗(yàn)證方法的示例代碼。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12