jQuery幫助之CSS尺寸(五)outerHeight、outerWidth
更新時間：2009年11月14日 00:14:03 作者：
在前面我們分別通過innerHeight()和innerWidth()來獲得第一個匹配元素內(nèi)部區(qū)域的高度和寬度，我們在應(yīng)用中往往除了需要內(nèi)部的尺寸，同樣還需要知道外部的高度和寬度.
以便更好控制元素來滿足我們的要求，那么我們可以通過outerHeight(options)和outerWidth(options)來獲取到這部分的高度和寬度。
outerHeight(options)
獲取第一個匹配元素外部高度（默認(rèn)包括補白和邊框）。
此方法對可見和隱藏元素均有效。
返回值：Integer
參數(shù)：
options(Boolean) : (false) 設(shè)置為 true 時，計算邊距在內(nèi)。
示例：
獲取第一段落外部高度。
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
結(jié)果:
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>
outerWidth(options)
獲取第一個匹配元素外部寬度（默認(rèn)包括補白和邊框）。
此方法對可見和隱藏元素均有效。
返回值：Integer
參數(shù)：
options(Boolean) : (false) 設(shè)置為 true 時，計算邊距在內(nèi)。
示例：
獲取第一段落外部寬度。
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
結(jié)果:
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>
outerHeight(options)
獲取第一個匹配元素外部高度（默認(rèn)包括補白和邊框）。
此方法對可見和隱藏元素均有效。
返回值：Integer
參數(shù)：
options(Boolean) : (false) 設(shè)置為 true 時，計算邊距在內(nèi)。
示例：
獲取第一段落外部高度。
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
結(jié)果:
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>
outerWidth(options)
獲取第一個匹配元素外部寬度（默認(rèn)包括補白和邊框）。
此方法對可見和隱藏元素均有效。
返回值：Integer
參數(shù)：
options(Boolean) : (false) 設(shè)置為 true 時，計算邊距在內(nèi)。
示例：
獲取第一段落外部寬度。
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
結(jié)果:
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>
您可能感興趣的文章:
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動條高度實現(xiàn)代碼
- 使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見
- jQuery 拖動層(在可視區(qū)域范圍內(nèi))
- JQuery獲取元素尺寸、位置及頁面滾動事件應(yīng)用示例
- 基于jquery實現(xiàn)圖片相關(guān)操作（重繪、獲取尺寸、調(diào)整大小、縮放）
- jquery中獲得元素尺寸和坐標(biāo)的方法整理
- jQuery+CSS3實現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
- 鼠標(biāo)懸浮顯示二級菜單效果的jquery實現(xiàn)
- jQuery動畫效果animate和scrollTop結(jié)合使用實例
- 淺談jQuery頁面的滾動位置scrollTop、scrollLeft
- JQuery獲取可視區(qū)尺寸和文檔尺寸及制作懸浮菜單示例
相關(guān)文章
這篇文章主要介紹了jQuery中hide()方法用法,以實例形式較為詳細(xì)的分析了hide()方法的定義、功能與使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章介紹了jQuery中獲取Radio元素值的方法，有需要的朋友可以參考一下2013-07-07
jquery.blockUI.js上傳滾動等待效果實現(xiàn)思路及代碼
上傳滾動等待效果想必大家在很多場合都有見過吧，本文將介紹jquery.blockUI.js實現(xiàn)上傳滾動等待效果，感興趣的你可不要錯過了哈，希望可以幫助到你2013-03-03
在群里看見有人貼出一個頁面問opacity不支持IE6，有什么好的支持方法沒。貼出第一眼就發(fā)現(xiàn)用了jq庫，當(dāng)場就想到了支持的。 但很多人回答用CSS濾鏡，當(dāng)我看到這個答案的時候。有些很吃驚。難道大家都不知道JQ是支持opacity兼容IE6+的嗎？ 開始他們都不相信。JQ怎么配合使用。于是就寫了一個簡單的代碼給他們。2013-03-03
2009年最受歡迎jQuery插件—AnythingSlider【滑動】2010-02-02
這篇文章主要介紹了jquery+html5爛漫愛心表白動畫，七夕你表白了嗎，如果還沒有的話，抓緊來學(xué)習(xí)學(xué)習(xí)吧，祝小伙伴們表白成功。2015-08-08
jquery中$.fn和圖片滾動效果實現(xiàn)的必備知識總結(jié)
圖片滾動效果相信大家都使用過，看上去很簡單的一個效果，如果想熟練的掌握必須知道jquery、IIFE、setInterval等基礎(chǔ)以及$.fn用法，下面這篇文章主要介紹了關(guān)于jquery中$.fn和圖片滾動效果制作的必備知識，需要的朋友可以參考下。2017-04-04
這篇文章主要介紹了jQuery簡單注冊和禁用全局事件的方法,結(jié)合實例形式分析了jQuery中ajaxStart與ajaxStop方法的使用技巧,需要的朋友可以參考下2016-07-07
JQuery中阻止事件冒泡方式有哪些？本文為大家準(zhǔn)備了兩種阻止事件冒泡的方式，兩種方式的區(qū)別在于。return false 不僅阻止了事件往上冒泡，而且阻止了事件本身2014-01-01