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

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

.outerHeight( )ボーダーの外側の高さを取得

構文

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

機能

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

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



解説

ボーダーの外側の高さを取得

サンプル(outerHeight/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").outerHeight();
	alert(ans);
})

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

マージンを含めた高さを取得

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

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

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

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

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

関連項目

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