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