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

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

復制代碼代碼如下:

$(selector).outerWidth(options)

參數(shù)列表:

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

實例代碼:

復制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

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

<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實現(xiàn)簡單實用的打分程序,涉及jquery節(jié)點遍歷與樣式操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07

jquery+ajax實現(xiàn)直接提交表單實例分析

這篇文章主要介紹了jquery+ajax直接提交表單的方法,涉及jQuery調(diào)用ajax進行表單提交所涉及的表單序列化、數(shù)值傳遞與處理、回調(diào)函數(shù)等相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

2016-06-06

Jquery實現(xiàn)異步上傳文件

這篇文章主要為大家詳細介紹了Jquery實現(xiàn)異步上傳文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

2022-07-07

jquery點擊改變class并toggle的實現(xiàn)代碼

下面小編就為大家?guī)硪黄猨query點擊改變class并toggle的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

2016-05-05

JQuery form表單提交前驗證單選框是否選中、刪除記錄時驗證經(jīng)驗總結(jié)(整理)

這篇文章主要介紹了JQuery form表單提交前驗證單選框是否選中、刪除記錄時驗證經(jīng)驗總結(jié)，非常不錯，具有參考借鑒價值，需要的朋友參考下吧

2017-06-06

jQuery插件HighCharts實現(xiàn)2D柱狀圖、折線圖的組合多軸圖效果示例【附demo源碼下載】

這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)2D柱狀圖、折線圖的組合多軸圖效果,結(jié)合實例形式分析了jQuery使用HighCharts插件同時繪制柱狀圖、折線圖的實現(xiàn)技巧與相關(guān)操作步驟,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

2017-03-03