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