初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ

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

.innerHeight( )ボーダーの内側の高さを取得

構文

ボーダーの内側の高さを取得返値:数値
jQo.innerHeight( )ver1.2.6〜

機能

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

左図のようにpaddingを含んだボーダーの内側の高さになります。



解説

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

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

<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").innerHeight();
	alert(ans);
})

結果としてbuttonをクリックするとアラートで70と表示されます。
paddingの設定は10pxですが、上下にあるので20pxの加算となります(要素:50px+padding:20px=計70px)

関連項目

要素の高さ(paddingは含まない)を取得したい場合はheightメソッドを利用します。
borderの外側、またはmarginもを含んだ高さを取得したい場合はouterHeightメソッドを利用します。