jQuery幫助之CSS尺寸(五)outerHeight、outerWidth
更新時(shí)間：2009年11月14日 00:14:03 作者：
在前面我們分別通過innerHeight()和innerWidth()來獲得第一個(gè)匹配元素內(nèi)部區(qū)域的高度和寬度，我們在應(yīng)用中往往除了需要內(nèi)部的尺寸，同樣還需要知道外部的高度和寬度.
以便更好控制元素來滿足我們的要求，那么我們可以通過outerHeight(options)和outerWidth(options)來獲取到這部分的高度和寬度。
outerHeight(options)
獲取第一個(gè)匹配元素外部高度（默認(rèn)包括補(bǔ)白和邊框）。
此方法對可見和隱藏元素均有效。
返回值：Integer
參數(shù)：
options(Boolean) : (false) 設(shè)置為 true 時(shí)，計(jì)算邊距在內(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)
獲取第一個(gè)匹配元素外部寬度（默認(rèn)包括補(bǔ)白和邊框）。
此方法對可見和隱藏元素均有效。
返回值：Integer
參數(shù)：
options(Boolean) : (false) 設(shè)置為 true 時(shí)，計(jì)算邊距在內(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)
獲取第一個(gè)匹配元素外部高度（默認(rèn)包括補(bǔ)白和邊框）。
此方法對可見和隱藏元素均有效。
返回值：Integer
參數(shù)：
options(Boolean) : (false) 設(shè)置為 true 時(shí)，計(jì)算邊距在內(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)
獲取第一個(gè)匹配元素外部寬度（默認(rèn)包括補(bǔ)白和邊框）。
此方法對可見和隱藏元素均有效。
返回值：Integer
參數(shù)：
options(Boolean) : (false) 設(shè)置為 true 時(shí)，計(jì)算邊距在內(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ū)域高度和寬度以及滾動條高度實(shí)現(xiàn)代碼
- 使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見
- jQuery 拖動層(在可視區(qū)域范圍內(nèi))
- JQuery獲取元素尺寸、位置及頁面滾動事件應(yīng)用示例
- 基于jquery實(shí)現(xiàn)圖片相關(guān)操作（重繪、獲取尺寸、調(diào)整大小、縮放）
- jquery中獲得元素尺寸和坐標(biāo)的方法整理
- jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
- 鼠標(biāo)懸浮顯示二級菜單效果的jquery實(shí)現(xiàn)
- jQuery動畫效果animate和scrollTop結(jié)合使用實(shí)例
- 淺談jQuery頁面的滾動位置scrollTop、scrollLeft
- JQuery獲取可視區(qū)尺寸和文檔尺寸及制作懸浮菜單示例
相關(guān)文章
jquery ajax提交表單數(shù)據(jù)的兩種實(shí)現(xiàn)方法
貌似AJAX越來越火了，作為一個(gè)WEB程序開發(fā)者要是不會這個(gè)感覺就要落伍，甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開發(fā)者，當(dāng)然我也要“隨波逐流”一把，不然飯碗不保啊！2010-04-04
一個(gè)簡單的JQuery each示例，使用each可以輸出JS對象、json格式的數(shù)據(jù)，大家參考使用吧2013-11-11
這篇文章介紹了JQuery獲取對象的方式，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
Jquery Ajax學(xué)習(xí)實(shí)例 向頁面發(fā)出請求，返回XML格式數(shù)據(jù)
Jquery Ajax學(xué)習(xí)實(shí)例 向頁面發(fā)出請求，返回XML格式數(shù)據(jù)的代碼2010-03-03
這篇文章主要介紹了jQuery中:has選擇器用法,實(shí)例分析了:has選擇器的功能、定義及匹配技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
深入理解jQuery.data() 的實(shí)現(xiàn)方式
本篇文章主要介紹了jQuery.data() 的實(shí)現(xiàn)方式，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
我們知道ajax本身實(shí)際上是通過XMLHttpRequest對象來異步進(jìn)行數(shù)據(jù)的交互，而瀏覽器出于安全考慮，不允許js代碼進(jìn)行跨域操作，所以js跨域操作會被拒絕。2010-03-03
jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】
下面小編就為大家?guī)硪黄猨query 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
標(biāo)簽云想必大家都有見到過吧，那么3D標(biāo)簽云，有沒有接觸過呢？本例為大家介紹下通過jquery 實(shí)現(xiàn)的3D標(biāo)簽云，感興趣的朋友可以參考下2014-06-06