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

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

.height( )要素の高さを取得/設定

構文

要素の高さを取得返値:数値
jQo.height( )ver1.0〜
要素の高さの設定返値:jQueryオブジェクト
jQo.height()ver1.0〜
jQo.height( function )ver1.4.1〜

機能

jQueryオブジェクトで指定した要素の高さを取得/設定します。高さは左図のようにpaddingの内側を指します。

引数を設定しない場合は高さの取得になります。要素が複数あるときは最初の要素からしか取得できません
cssメソッドと異なり数値で高さが取得できるので計算に利用できます。

引数を設定すると高さの設定になります。ver1.4からは引数にfunctionを指定することも可能で、条件によって設定する値を変更するなど高度な処理にも対応できます。

解説

要素の高さを取得する

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

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

結果としてbuttonをクリックすると、div要素の高さが(cssの設定と同じ)50と表示されます。この値は数値なので計算に利用できます。

複数の要素からは高さを取得できません

セレクタで選択した要素が複数ある場合、heightメソッドは最初の要素の高さしか取得しません。
サンプル(height/02.html)を開いてbody内にdiv要素が2つあり、最初のdiv要素にはtestのクラス属性が付加され高さが変更されていることを確認してください(高さは上から100px,50pxになっています)。

<div class="test"></div>
<div></div>

jQueryはheight/01.htmlから変更ありません。buttonをクリックするとアラートで100と表示され、最初のdiv要素からしか値が取得できない事が確認できます。複数の要素から高さを取得したい場合はmapメソッドを利用します。これについてはページ最下部の「メモ」を参照してください。

ページの高さも取得できます

セレクタにwindowを利用することでウインドウ高さ、documentを利用することでドキュメント高さも取得できます(設定はできません)。
サンプル(height/03.html)を開いてbody内に大きなdiv要素があることを確認してください。jQueryは以下の様に記述され、buttonをクリックするとウインドウ高さとドキュメント高さを取得しアラートで表示します。

$("button").click(function(){
	var win = $(window).height();
	var doc = $(document).height();
	alert("window:"+win + "  document:"+doc);
})

実際にbuttonをクリックして、どの様な値が表示されるか確認してください。
ウインドウの高さを灰色のdiv要素より大きくしている場合は、ウインドウ高さとドキュメント高さは同じになりますが、ウインドウの高さを灰色のdiv要素より小さくした場合は差が出ると思います。div要素の高さは1000pxに固定されているので、これ以下にはなりません。

このサンプルではheightメソッドが正常に機能しない問題に悩まされました。原因は「DOCTYPE」の記述が無かったためです。heightメソッドはDOCTYPEの記述が無いと正常に機能しないことに注意してください。
→参考:アンギス様「事件です!jQuery(window).height()が動かねぇ ~原因究明と解決まで~

要素の高さを設定する

heightメソッドは引数に「数値」を設定することで要素の高さを設定することができます。
サンプル(height/04.html)を開いてbody内の構成がheight/01.htmlと同じ事を確認してください。jQueryは以下の様に変更され、buttonをクリックするとdiv要素の高さを100pxに設定します。

$("button").click(function(){
	$("div").height(100);
})

結果として、buttonをクリックするとdiv要素の高さが100pxになります。このサイズはmarginやpadding、borderの値を含まないので(最初の図を参照)見かけの高さが100pxではないことに注意してください。

高さを設定する場合は、セレクタで選択した要素が複数あってもOKです。すべての要素の高さをまとめて設定することができます。サンプル(height/04b.html)では2つのdiv要素がありますが、buttonをクリックすると両方とも高さが20pxになります。

引数にFunctionを設定

サンプル(height/05.html)を開いてbody内にdiv要素が5つあることを確認して下さい。jQueryは以下の様に記述されheightメソッドの引数にfunctionの「heightFunc」が設定されています。

$("button").click(function(){
	$("div").height(heightFunc);
})

heightメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(インデックス番号、現在の高さ)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で最終的に設定したい高さをreturnで返すようにします。

heightメソッドに設定するFunctionの構文
function 任意の名前(インデックス番号, 現在の高さ){
 任意の処理(引数を利用可能)
 return 設定する高さ;
}

サンプルheight/05.htmlで利用したheightFuncは以下の様になっており、index番号に1足した数値に50かけた値を返すようにしました。

function heightFunc(index, height){
	return (index+1)*50;
}

結果としてbuttonをクリックするとdiv要素の高さが、左から50px,100px,150px,200px,250pxとなります。

相対的に値を変化させる

本家サイトには記載されていなかったのですが、cssメソッドで算術複合代入子を利用して相対的に値を変化させることができていたので、heightメソッドでも試したところ、きちんと機能しました。

サンプル(height/06.html)を開いてbody内の構成がheight/04.htmlと同じ事を確認してください。jQueryもほとんど同じで、異なるのは以下の様に引数に算術複合代入子を利用している点だけです。このときクォートが必要なので忘れないようにして下さい。

$("button").click(function(){
	$("div").height("+=10");
})

結果として、buttonをクリックするたびに高さが10px増えていきます。

関連項目

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

メモ

mapメソッドを利用して複数の要素の値を取得

サンプル(height/02.html)で確認したように、複数の要素の高さを取得しようとしても最初の要素からしか取得できません。しかしmapメソッドを利用することで対応可能です。サンプル(height/test01.html)ではbuttonをクリックすると、各div要素の高さがアラートで表示されます(値は配列です)。

セレクタにwindowを利用する

本家のサイトではセレクタにwindowを設定するとウインドウサイズ(browser viewport)が得られるとあるのですがdocumentと同じ値が返ってきます。documentはコンテンツ全体の高さで、スクロールしないと見えない範囲も含んだコンテンツの高さ。ウインドウサイズは純粋にブラウザのウインドウサイズと思っているのですが、私の認識がおかしいのでしょうか?
→参考:セレクタにdocumentを設定したサンプル(height/03.html
→参考:セレクタにwindowを設定したサンプル(height/03b.html