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ì)可見和隱藏元素均有效。
可以與outerWidth()方法結(jié)合學(xué)習(xí)。
語法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(selector).outerHeight(options)
參數(shù)列表:
實(shí)例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.fzitv.net/" />
<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ì)有所幫助。
您可能感興趣的文章:
- jQuery中的height innerHeight outerHeight區(qū)別示例介紹
- Jquery 的outerHeight方法使用介紹
- jQuery幫助之CSS尺寸(五)outerHeight、outerWidth
- jQuery中outerWidth()方法用法實(shí)例
- jQuery獲得document和window對(duì)象寬度和高度的方法
- jQuery設(shè)置指定網(wǎng)頁元素寬度和高度的方法
- Jquery實(shí)現(xiàn)鼠標(biāo)移動(dòng)放大圖片功能實(shí)例
- jQuery獲得包含margin的outerWidth和outerHeight的方法
相關(guān)文章
Jqgrid設(shè)置全選(選擇)及獲取選擇行的值示例代碼
本篇文章主要介紹了Jqgrid設(shè)置全選(選擇)及獲取選擇行的值示例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
一個(gè)簡單的jquery彈出框代碼實(shí)現(xiàn)，點(diǎn)擊鏈接彈出模式對(duì)話框，任意點(diǎn)擊網(wǎng)頁的其它地方可以關(guān)閉彈出框，可以自定義透明度，簡單實(shí)用的jquery彈出框效果。2015-04-04
jquery模擬進(jìn)度條實(shí)現(xiàn)方法
這篇文章主要介紹了jquery模擬進(jìn)度條的方法,實(shí)例分析了jquery操作頁面元素樣式實(shí)現(xiàn)頁面動(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之所以如此流行并被從大公司到個(gè)人博客的幾乎每個(gè)人都廣泛使用，是因?yàn)樗鲜趾褪褂孟喈?dāng)簡單，而且為我們提供了一些人都不知道的相當(dāng)棒的特性。2010-01-01
jQuery基本選擇器(實(shí)例及表單域value的獲取方法)
下面小編就為大家?guī)硪黄猨Query基本選擇器(實(shí)例及表單域value的獲取方法)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
使用過AJAX技術(shù)的人都知道大名鼎鼎的JQuery。雖然我來學(xué)習(xí)之前有看過AJAX的視頻，但那時(shí)對(duì)WEB應(yīng)用這個(gè)東西還比較模糊，不清楚HTML、JSP與Servlet是怎么工作的，甚至不知道JQuery包裝的是什么東西。2011-02-02
為jQuery.Treeview添加右鍵菜單的實(shí)現(xiàn)代碼
jquery.treeview 數(shù)據(jù)通過JSON數(shù)據(jù)加載，有需要的朋友，可以通jquery的AJAX方法獲取相關(guān)的JSON數(shù)據(jù)。2010-10-10