デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.outerWidth( )ボーダーの外側の幅を取得

構文

ボーダーの外側の幅を取得返値:数値
jQo.outerWidth( [true] )ver1.2.6〜

機能

jQueryオブジェクトで指定した要素のボーダーの外側の幅を数値で取得します。widthメソッドと異なり値を設定することはできません。

引数にtrueを設定することで、marginも含んだ幅を取得できます。



解説

ボーダーの外側の幅を取得

サンプル(outerWidth/01.html)を開いてbody内にdiv要素が1つあることを確認してください。div要素に対してはcssの設定で高さを50px、paddingに10px、borderに3pxを設定しています。

<div></div>
div{
	width:50px;
	height:50px;
	margin:10px;
	padding:10px;
	border:3px solid #333;
	background-color:#ddd;
}

jQueryは以下の様に記述され、buttonをクリックするとdiv要素のボーダーの外側の幅を取得し、アラートで表示します。

$("button").click(function(){
	var ans = $("div").outerWidth();
	alert(ans);
})

結果としてbuttonをクリックするとアラートで76と表示されます。
左右のpaddingで10x2=20px、左右のborderで3x2=6px(要素:50px+padding:20px+border:6px=計76px)

マージンを含めた幅を取得

outerWidthメソッドは引数にtrueを設定することでマージンを含めた幅を取得できます。
サンプル(outerWidth/02.html)を開いてbody内の構成がouterWidth/01.htmlと同じことを確認してください。cssの設定でマージンは10pxにしています。

div{
	width:50px;
	height:50px;
	margin:10px;
	padding:10px;
	border:3px solid #333;
	background-color:#ddd;
}

jQueryはすこし変更され、以下の様にouterWidthメソッドの引数にtrueが設定されています。

$("button").click(function(){
	var ans = $("div").outerWidth(true);
	alert(ans);
})

結果として、buttonをクリックするとアラートで96と表示されます。左右のpaddingで10x2=20px、左右のborderで3x2=6px、左右のマージンで10x2=20px(要素:50px+padding:20px+border:6px+margin:20px=計96px)

ちなみに引数にfalseを設定すると、省略した(outerWidth/01.html)のと同じ結果になります。
→サンプル(outerWidth/02b.html

$("button").click(function(){
	var ans = $("div").outerWidth(false);
	alert(ans);
})

結果はouterWidth/01.htmlと同じで76pxと表示されます。

関連項目

要素の幅(paddingは含まない)を取得したい場合はwidthメソッドを利用します。
borderの内側の幅を取得したい場合はinnerWidthメソッドを利用します。