jQuery中outerHeight()方法用法實(shí)例

更新時(shí)間：2015年01月19日 09:09:05 投稿：shichen2014

這篇文章主要介紹了jQuery中outerHeight()方法用法,實(shí)例分析了outerHeight()方法的功能、定義及獲取第一個(gè)匹配元素外部高度的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery中outerHeight()方法用法。分享給大家供大家參考。具體分析如下：

此方法獲取第一個(gè)匹配元素外部高度。
默認(rèn)情況下外部高度是高度(height)、內(nèi)補(bǔ)白(padding)和邊框(border)之和。
如果參數(shù)設(shè)置為true的話，外補(bǔ)白(margin)尺寸也會(huì)算入外部寬度。
此方法對(duì)可見(jiàn)和隱藏元素均有效。
可以與outerWidth()方法結(jié)合學(xué)習(xí)。

語(yǔ)法結(jié)構(gòu):

復(fù)制代碼代碼如下:

$(selector).outerHeight(options)

參數(shù)列表:

參數(shù)	描述
options	定義是否把外補(bǔ)白(margin)計(jì)算在內(nèi)：一.fase，邊距不計(jì)算在內(nèi)，默認(rèn)值。二.true，邊距計(jì)算在內(nèi)。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dhdzp.com/" />

<title>outerHeight()函數(shù)-腳本之家</title>

<style type="text/css">

div{

  background-color:green;

  height:100px;

  width:200px;

  padding:10px;

  margin:10px;

  border:5px solid red;

}   

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("div").text($("div").outerHeight(true))

  })

})

</script>

</head>

<body>

  <div>此處顯outerHeight數(shù)值</div>

  <button>點(diǎn)擊查看div的outerHeight</button>

</body>

</html>

點(diǎn)擊按鈕可以顯示div元素外部高度。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Jqgrid設(shè)置全選(選擇)及獲取選擇行的值示例代碼
本篇文章主要介紹了Jqgrid設(shè)置全選(選擇)及獲取選擇行的值示例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
jquery簡(jiǎn)單的彈出層浮動(dòng)層代碼
一個(gè)簡(jiǎn)單的jquery彈出框代碼實(shí)現(xiàn)，點(diǎn)擊鏈接彈出模式對(duì)話框，任意點(diǎn)擊網(wǎng)頁(yè)的其它地方可以關(guān)閉彈出框，可以自定義透明度，簡(jiǎn)單實(shí)用的jquery彈出框效果。
2015-04-04
jquery模擬進(jìn)度條實(shí)現(xiàn)方法
這篇文章主要介紹了jquery模擬進(jìn)度條的方法,實(shí)例分析了jquery操作頁(yè)面元素樣式實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)效果的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery 1.9.1源碼分析系列（十）事件系統(tǒng)之主動(dòng)觸發(fā)事件和模擬冒泡處理
這篇文章主要介紹了jQuery 1.9.1源碼分析系列（十）事件系統(tǒng)之主動(dòng)觸發(fā)事件和模擬冒泡處理的相關(guān)資料,需要的朋友可以參考下
2015-11-11
JQuery textlimit 顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)
顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)的實(shí)現(xiàn)方法。
2009-05-05
jQuery 動(dòng)畫彈出窗體支持多種展現(xiàn)方式
今天剛寫的利用jQuery動(dòng)畫彈出窗體，支持了string、Ajax、iframe、controls四種展現(xiàn)方式，具體細(xì)節(jié)下面慢慢介紹，先看效果圖。
2010-04-04
了解jQuery技巧來(lái)提高你的代碼
jQuery之所以如此流行并被從大公司到個(gè)人博客的幾乎每個(gè)人都廣泛使用，是因?yàn)樗鲜趾褪褂孟喈?dāng)簡(jiǎn)單，而且為我們提供了一些人都不知道的相當(dāng)棒的特性。
2010-01-01
jQuery基本選擇器(實(shí)例及表單域value的獲取方法)
下面小編就為大家?guī)?lái)一篇jQuery基本選擇器(實(shí)例及表單域value的獲取方法)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
JQuery 選擇器、過(guò)濾器介紹
使用過(guò)AJAX技術(shù)的人都知道大名鼎鼎的JQuery。雖然我來(lái)學(xué)習(xí)之前有看過(guò)AJAX的視頻，但那時(shí)對(duì)WEB應(yīng)用這個(gè)東西還比較模糊，不清楚HTML、JSP與Servlet是怎么工作的，甚至不知道JQuery包裝的是什么東西。
2011-02-02
為jQuery.Treeview添加右鍵菜單的實(shí)現(xiàn)代碼
jquery.treeview 數(shù)據(jù)通過(guò)JSON數(shù)據(jù)加載，有需要的朋友，可以通jquery的AJAX方法獲取相關(guān)的JSON數(shù)據(jù)。
2010-10-10