jQuery中outerWidth()方法用法實例
更新時間：2015年01月19日 09:19:34 投稿：shichen2014
這篇文章主要介紹了jQuery中outerWidth()方法用法,實例分析了outerWidth()方法的功能、定義及獲取第一個匹配元素外部寬度的使用技巧,需要的朋友可以參考下
本文實例講述了jQuery中outerWidth()方法用法。分享給大家供大家參考。具體分析如下：
此方法獲取第一個匹配元素外部寬度。
默認(rèn)情況下外部高度是寬度(width)、內(nèi)補白(padding)和邊框(border)之和。
如果參數(shù)設(shè)置為true的話，外補白(margin)尺寸也會算入外部寬度。
此方法對可見和隱藏元素均有效。
可以與outerHeight()方法結(jié)合學(xué)習(xí)。
語法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(selector).outerWidth(options)
參數(shù)列表:
實例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.fzitv.net/" />
<title>outerWidth()函數(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").outerWidth(true))
})
})
</script>
</head>
<body>
<div>此處顯outerWidth()數(shù)值</div>
<button>點擊查看div的outerWidth</button>
</body>
</html>
點擊按鈕可以顯示div的元素外部寬度。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
本文轉(zhuǎn)自：螞蟻部落http://www.softwhy.com/
相關(guān)文章
jQuery的內(nèi)容過濾選擇器學(xué)習(xí)教程
這篇文章主要介紹了jQuery的內(nèi)容過濾選擇器學(xué)習(xí)教程,詳細地整理了jQuery中四個過濾器的相關(guān)函數(shù)用法,需要的朋友可以參考下2016-04-04
利用jQuery及AJAX技術(shù)定時更新GridView的某一列數(shù)據(jù)
這篇文章主要介紹了利用jQuery及AJAX技術(shù)定時更新GridView的某一列數(shù)據(jù)的方法,這里的GridView是指C#軟件開發(fā)中的GridView控件,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JQuery中基礎(chǔ)過濾選擇器用法,涉及jQuery屬性選擇及樣式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
jQuery 淡入淡出 png圖在ie8下有黑色邊框的解決方法
本文章介紹了，jQuery 淡入淡出 png圖在ie8下有黑色邊框的解決方法，需要的朋友可以參考一下2013-03-03
ajax無刷新動態(tài)調(diào)用股票信息(改良版)
今日閑來無事，把上次寫的代碼稍微改了改。增加了動態(tài)追加和刪除股票信息的功能（代碼基于jquery運行：http://jquery.com/） 。由于對Ajax技術(shù)的認(rèn)識還只是在初級階段，總覺得這么些有點別扭，希望大蝦能夠指點一二。2008-11-11
與大家一起分享8款精美的jQuery圖片播放插件,有興趣的朋友可以下載使用和研究；廢話不多說了，直接上這些插件,希望這些插件對你有所幫助2013-02-02
這篇文章主要介紹了jQuery中$.each使用詳解,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery插件EasyUI中form表單提交實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
jQuery EasyUI Tab 選項卡問題小結(jié)
這篇文章主要介紹了jQuery EasyUI Tab 選項卡問題小結(jié),在項目開發(fā)階段很多朋友都遇到過此問題，其實解決辦法很簡單的，下面小編給大家分享下問題原因及解決辦法，需要的朋友可以參考下2016-08-08
jQuery實現(xiàn)的多選框多級聯(lián)動插件
這篇文章主要介紹了jQuery實現(xiàn)的多選框聯(lián)動插件,需要的朋友可以參考下2014-05-05